﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>表格 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#tables" class="nav-link font-weight-bold"><span>表格(Tables)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#items-record-data" class="nav-link"><span>项目（记录数据）</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-item-notes-and-warnings" class="nav-link"><span>表格项目注释和警告</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#fields-column-definitions" class="nav-link"><span>字段（列定义）</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#fields-as-a-simple-array" class="nav-link"><span>字段作为简单数组</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#fields-as-an-array-of-objects" class="nav-link"><span>字段作为对象数组</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#field-definition-reference" class="nav-link"><span>字段定义参考</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#primary-key" class="nav-link"><span>主键</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-row-id-generation" class="nav-link"><span>表格行ID生成</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-render-and-transition-optimization" class="nav-link"><span>表格渲染和过渡优化</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#table-style-options" class="nav-link"><span>表格样式选项</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-styling" class="nav-link"><span>表格样式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#row-styling-and-attributes" class="nav-link"><span>行样式和属性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#responsive-tables" class="nav-link"><span>响应表格</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#stacked-tables" class="nav-link"><span>堆叠表格</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-caption" class="nav-link"><span>表格标题</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-colgroup" class="nav-link"><span>表格 colgroup</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-busy-state" class="nav-link"><span>表格忙碌状态</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#custom-data-rendering" class="nav-link"><span>自定义数据渲染</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#scoped-field-slots" class="nav-link"><span>范围字段插槽</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#formatter-callback" class="nav-link"><span>格式化程序回调</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#header-and-footer-custom-rendering-via-scoped-slots" class="nav-link"><span>
  通过作用域插槽的页眉和页脚自定义呈现</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#adding-additional-rows-to-the-header" class="nav-link"><span>向标题添加其他行</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#creating-a-custom-footer" class="nav-link"><span>创建自定义页脚</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#custom-empty-and-emptyfiltered-rendering-via-slots" class="nav-link"><span>通过插槽自定义空白和EmptyFiltered渲染</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#advanced-features" class="nav-link"><span>高级功能</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#sticky-headers" class="nav-link"><span>粘页眉</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#sticky-columns" class="nav-link"><span>粘性列</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#row-details-support" class="nav-link"><span>行详细信息支持</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#row-select-support" class="nav-link"><span>行选择支持</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-body-transition-support" class="nav-link"><span>表格内容过渡支持</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#v-model-binding" class="nav-link"><span>v-model 捆绑</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#sorting" class="nav-link"><span>排序</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#sort-icon-alignment" class="nav-link"><span>排序图标对齐</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#customizing-the-sort-icons" class="nav-link"><span>自定义排序图标</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#sort-compare-routine" class="nav-link"><span>排序比较常规</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#internal-sorting-and-locale-handling" class="nav-link"><span>内部排序和语言环境处理</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#custom-sort-compare-routine" class="nav-link"><span>自定义排序比较例程/span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disable-local-sorting" class="nav-link"><span>禁用本地排序</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#change-initial-sort-direction" class="nav-link"><span>更改初始排序方向</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#filtering" class="nav-link"><span>筛选</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#built-in-filtering" class="nav-link"><span>内置过滤</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#built-in-filtering-options" class="nav-link"><span>内置过滤选项</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#custom-filter-function" class="nav-link"><span>自定义过滤器</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#filter-events" class="nav-link"><span>过滤事件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#debouncing-filter-criteria-changes" class="nav-link"><span>取消过滤条件的更改</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#filtering-notes" class="nav-link"><span>过滤器 注意事项</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#pagination" class="nav-link"><span>分页</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#using-items-provider-functions" class="nav-link"><span>使用项目提供者功能</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#automated-table-busy-state" class="nav-link"><span>自动表格繁忙状态</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#provider-paging-filtering-and-sorting" class="nav-link"><span>提供者分页，过滤和排序</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#force-refreshing-of-table-data" class="nav-link"><span>强制刷新表数据</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#detection-of-sorting-change" class="nav-link"><span>检测分类变化</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#server-side-rendering" class="nav-link"><span>服务器端渲染</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#light-weight-tables" class="nav-link"><span>轻量级表格</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-lite-as-a-plugin" class="nav-link"><span>表精简版作为插件</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#simple-tables" class="nav-link"><span>简单表格</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#simple-tables-and-stacked-mode" class="nav-link"><span>简单表格和堆叠模式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#simple-tables-and-sticky-columns" class="nav-link"><span>简单表格和粘性列</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#table-simple-as-a-plugin" class="nav-link"><span>表格简单易用</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#table-helper-components" class="nav-link"><span>表格助手组件</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>辅助功能</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#heading-accessibility" class="nav-link"><span>标题可访问性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#data-row-accessibility" class="nav-link"><span>数据行可访问性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#row-event-accessibility" class="nav-link"><span>行事件可访问性</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#complete-example" class="nav-link"><span>完整的例子</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-table" class="nav-link"><span>&lt;b-table&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-table-lite" class="nav-link"><span>&lt;b-table-lite&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-table-simple" class="nav-link"><span>&lt;b-table-simple&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-tbody" class="nav-link"><span>&lt;b-tbody&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-thead" class="nav-link"><span>&lt;b-thead&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-tfoot" class="nav-link"><span>&lt;b-tfoot&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-tr" class="nav-link"><span>&lt;b-tr&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-td" class="nav-link"><span>&lt;b-td&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-th" class="nav-link"><span>&lt;b-th&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">表格</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">表格(Tables)</h1>
  <p class="bd-lead">使用<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>输出表格，并支持分页、过滤、排序、自定义呈现，各种样式选项，事件和异步数据。 为支持在不具备所有高级功能的情况下简单地显示表格数据，BootstrapVue提供了两个轻巧的替代组件，
  <a href="#light-weight-tables" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code></a> and <a href="#simple-tables" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code></a>.</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>








<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#items-record-data" class=""><span data-v-811345e6="">Items (record data)</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-item-notes-and-warnings" class=""><span data-v-811345e6="">Table item notes and warnings</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fields-column-definitions" class=""><span data-v-811345e6="">Fields (column definitions)</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fields-as-a-simple-array" class=""><span data-v-811345e6="">Fields as a simple array</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fields-as-an-array-of-objects" class=""><span data-v-811345e6="">Fields as an array of objects</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#field-definition-reference" class=""><span data-v-811345e6="">Field definition reference</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#primary-key" class=""><span data-v-811345e6="">Primary key</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-row-id-generation" class=""><span data-v-811345e6="">Table row ID generation</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-render-and-transition-optimization" class=""><span data-v-811345e6="">Table render and transition optimization</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-style-options" class=""><span data-v-811345e6="">Table style options</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-styling" class=""><span data-v-811345e6="">Table styling</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#row-styling-and-attributes" class=""><span data-v-811345e6="">Row styling and attributes</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#responsive-tables" class=""><span data-v-811345e6="">Responsive tables</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#stacked-tables" class=""><span data-v-811345e6="">Stacked tables</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-caption" class=""><span data-v-811345e6="">Table caption</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-colgroup" class=""><span data-v-811345e6="">Table colgroup</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-busy-state" class=""><span data-v-811345e6="">Table busy state</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#custom-data-rendering" class=""><span data-v-811345e6="">Custom data rendering</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#scoped-field-slots" class=""><span data-v-811345e6="">Scoped field slots</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#formatter-callback" class=""><span data-v-811345e6="">Formatter callback</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#header-and-footer-custom-rendering-via-scoped-slots" class=""><span data-v-811345e6="">Header and Footer custom rendering via scoped slots</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#adding-additional-rows-to-the-header" class=""><span data-v-811345e6="">Adding additional rows to the header</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#creating-a-custom-footer" class=""><span data-v-811345e6="">Creating a custom footer</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#custom-empty-and-emptyfiltered-rendering-via-slots" class=""><span data-v-811345e6="">Custom empty and emptyfiltered rendering via slots</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#advanced-features" class=""><span data-v-811345e6="">Advanced features</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#sticky-headers" class=""><span data-v-811345e6="">Sticky headers</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#sticky-columns" class=""><span data-v-811345e6="">Sticky columns</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#row-details-support" class=""><span data-v-811345e6="">Row details support</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#row-select-support" class=""><span data-v-811345e6="">Row select support</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-body-transition-support" class=""><span data-v-811345e6="">Table body transition support</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#v-model-binding" class=""><span data-v-811345e6="">v-model binding</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#sorting" class=""><span data-v-811345e6="">Sorting</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#sort-icon-alignment" class=""><span data-v-811345e6="">Sort icon alignment</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#customizing-the-sort-icons" class=""><span data-v-811345e6="">Customizing the sort icons</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#sort-compare-routine" class=""><span data-v-811345e6="">Sort-compare routine</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#internal-sorting-and-locale-handling" class=""><span data-v-811345e6="">Internal sorting and locale handling</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#custom-sort-compare-routine" class=""><span data-v-811345e6="">Custom sort-compare routine</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disable-local-sorting" class=""><span data-v-811345e6="">Disable local sorting</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#change-initial-sort-direction" class=""><span data-v-811345e6="">Change initial sort direction</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#filtering" class=""><span data-v-811345e6="">Filtering</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#built-in-filtering" class=""><span data-v-811345e6="">Built in filtering</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#built-in-filtering-options" class=""><span data-v-811345e6="">Built in filtering options</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#custom-filter-function" class=""><span data-v-811345e6="">Custom filter function</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#filter-events" class=""><span data-v-811345e6="">Filter events</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#debouncing-filter-criteria-changes" class=""><span data-v-811345e6="">Debouncing filter criteria changes</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#filtering-notes" class=""><span data-v-811345e6="">Filtering notes</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#pagination" class=""><span data-v-811345e6="">Pagination</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#using-items-provider-functions" class=""><span data-v-811345e6="">Using items provider functions</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#automated-table-busy-state" class=""><span data-v-811345e6="">Automated table busy state</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#provider-paging-filtering-and-sorting" class=""><span data-v-811345e6="">Provider paging, filtering, and sorting</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#force-refreshing-of-table-data" class=""><span data-v-811345e6="">Force refreshing of table data</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#detection-of-sorting-change" class=""><span data-v-811345e6="">Detection of sorting change</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#server-side-rendering" class=""><span data-v-811345e6="">Server side rendering</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#light-weight-tables" class=""><span data-v-811345e6="">Light-weight tables</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-lite-as-a-plugin" class=""><span data-v-811345e6="">Table lite as a plugin</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#simple-tables" class=""><span data-v-811345e6="">Simple tables</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#simple-tables-and-stacked-mode" class=""><span data-v-811345e6="">Simple tables and stacked mode</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#simple-tables-and-sticky-columns" class=""><span data-v-811345e6="">Simple tables and sticky columns</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-simple-as-a-plugin" class=""><span data-v-811345e6="">Table simple as a plugin</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#table-helper-components" class=""><span data-v-811345e6="">Table helper components</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#heading-accessibility" class=""><span data-v-811345e6="">Heading accessibility</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#data-row-accessibility" class=""><span data-v-811345e6="">Data row accessibility</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#row-event-accessibility" class=""><span data-v-811345e6="">Row event accessibility</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#complete-example" class=""><span data-v-811345e6="">Complete example</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">组件引用</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-table" class=""><span data-v-811345e6="">&lt;b-table&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-table-lite" class=""><span data-v-811345e6="">&lt;b-table-lite&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-table-simple" class=""><span data-v-811345e6="">&lt;b-table-simple&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-tbody" class=""><span data-v-811345e6="">&lt;b-tbody&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-thead" class=""><span data-v-811345e6="">&lt;b-thead&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-tfoot" class=""><span data-v-811345e6="">&lt;b-tfoot&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-tr" class=""><span data-v-811345e6="">&lt;b-tr&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-td" class=""><span data-v-811345e6="">&lt;b-td&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-th" class=""><span data-v-811345e6="">&lt;b-th&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">导入单个组件</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</nav>
<p><strong>示例：基本用法</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table table-striped table-hover" id="__BVID__841">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">年龄</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">姓氏<th>
<th role="columnheader" scope="col" aria-colindex="3" class="">名字</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">40</td>
<td aria-colindex="2" role="cell" class="">Dickerson</td>
<td aria-colindex="3" role="cell" class="">Macdonald</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">21</td>
<td aria-colindex="2" role="cell" class="">Larsen</td>
<td aria-colindex="3" role="cell" class="">Shaw</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">89</td>
<td aria-colindex="2" role="cell" class="">Geneva</td>
<td aria-colindex="3" role="cell" class="">Wilson</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">38</td>
<td aria-colindex="2" role="cell" class="">Jami</td>
<td aria-colindex="3" role="cell" class="">Carney</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">striped</span> <span class="hljs-attr">hover</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Carney'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="items-record-data" class="bv-no-focus-ring"><span class="bd-content-title">项目（记录数据）<a class="anchorjs-link" href="#items-record-data" aria-labelledby="items-record-data"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">items</code> items是数组格式的表数据，其中每个记录（行）数据都是键对象。 示例格式：</p>
<!-- eslint-disable no-unused-vars -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">const</span> items = [
  { <span class="hljs-attr">age</span>: <span class="hljs-number">32</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Cyndi'</span> },
  { <span class="hljs-attr">age</span>: <span class="hljs-number">27</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Havij'</span> },
  { <span class="hljs-attr">age</span>: <span class="hljs-number">42</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Robert'</span> }
]</pre></figure>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code> 自动对第一行进行采样以提取字段名称（记录数据中的键）。 字段名称是自动的 
<code translate="no" class="notranslate text-nowrap">kebab-case</code>, <code translate="no" class="notranslate text-nowrap">snake_case</code>, and
 <code translate="no" class="notranslate text-nowrap">camelCase</code> kebab-case，snake_case和camel对单个单词进行大写并为每个单词大写。 转换示例:</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">first_name</code> 成为 <code translate="no" class="notranslate text-nowrap">first name</code></li>
<li><code translate="no" class="notranslate text-nowrap">last-name</code> 成为<code translate="no" class="notranslate text-nowrap">last name </code></li>
<li><code translate="no" class="notranslate text-nowrap">age</code> 成为 <code translate="no" class="notranslate text-nowrap">Age</code></li>
<li><code translate="no" class="notranslate text-nowrap">YEAR</code> 代替 <code translate="no" class="notranslate text-nowrap">YEAR</code></li>
<li><code translate="no" class="notranslate text-nowrap">isActive</code> 成为 <code translate="no" class="notranslate text-nowrap">Is Active</code></li>
</ul>
<p>这些标题将按照它们在<strong>第一</strong>条数据记录中出现的顺序显示在表标题中。 请参阅下面的“字段”部分，以自定义字段标题的显示方式。</p>
<p><strong>注意:</strong> 无法保证现场订购。 字段通常会按照它们在第一行中定义的顺序出现，但是根据所使用的浏览器版本的不同，情况并非总是如此。 请参阅<a href="#fields-column-definitions" class="font-weight-bold">字段（列定义）</a> 下面的部分，以了解如何保证字段的顺序以及如何覆盖生成的标题。 
  .</p>
<p>记录数据可能还具有其他特殊的保留名称键，用于为行和单个单元格（变体）着色，以及触发其他行详细信息。 受支持的可选项目记录修改器属性（确保您的字段键与这些名称不冲突）：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">_cellVariants</code></td>
<td>Object</td>
<td>
  应用于单个单元格的引导上下文状态。按字段设置关键帧（有关支持的值，请参见<a href="../../../bootstrap-vue/docs/reference/color-variants" class="font-weight-bold">Color Variants</a>）。
  这些变量映射到类<code translate="no" class="notranslate text-nowrap">table-${variant}</code>或<code translate="no" class="notranslate text-nowrap">bg-${variant}（设置<code translate="no" class="notranslate text-nowrap">dark</code>属性时）。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">_rowVariant</code></td>
<td>String</td>
<td>
  应用于整行的引导上下文状态（请参阅支持值的 <a href="../../../bootstrap-vue/docs/reference/color-variants" class="font-weight-bold">Color Variants</a>）。
  这些变量映射到类<code translate="no" class="notranslate text-nowrap">table-${variant}</code>或<code translate="no" class="notranslate text-nowrap">bg-${variant}</code>
  （设置<code translate="no" class="notranslate text-nowrap">dark</code>属性时）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">_showDetails</code></td>
<td>Boolean</td>
<td>
  用于触发<code translate="no" class="notranslate text-nowrap">row-details</code>作用域插槽的显示。有关其他信息，请参见下面的
  <a href="#row-details-support" class="font-weight-bold">行详细信息支持</a>部分
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：对表单元格使用变体</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-variants notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table table-hover" id="__BVID__853">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">年龄</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">姓氏</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">名字</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">40</td>
<td aria-colindex="2" role="cell" class="">Dickerson</td>
<td aria-colindex="3" role="cell" class="">Macdonald</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">21</td>
<td aria-colindex="2" role="cell" class="">Larsen</td>
<td aria-colindex="3" role="cell" class="">Shaw</td>
</tr>
<tr role="row" class="table-danger">
<td aria-colindex="1" role="cell" class="">89</td>
<td aria-colindex="2" role="cell" class="">Geneva</td>
<td aria-colindex="3" role="cell" class="">Wilson</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="table-info">40</td>
<td aria-colindex="2" role="cell" class="table-warning">Thor</td>
<td aria-colindex="3" role="cell" class="">MacDonald</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">29</td>
<td aria-colindex="2" role="cell" class="">Dick</td>
<td aria-colindex="3" role="cell" class="">Dunlap</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">hover</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          {
            <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>,
            <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>,
            <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span>,
            <span class="hljs-attr">_rowVariant</span>: <span class="hljs-string">'danger'</span>
          },
          {
            <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>,
            <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Thor'</span>,
            <span class="hljs-attr">last_name</span>: <span class="hljs-string">'MacDonald'</span>,
            <span class="hljs-attr">_cellVariants</span>: { <span class="hljs-attr">age</span>: <span class="hljs-string">'info'</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'warning'</span> }
          },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">29</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dick'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Dunlap'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><code translate="no" class="notranslate text-nowrap">items</code> 也可以是对提供程序函数的引用，该函数将返回一个Array of items数据。 提供程序功能也可以是异步的：</p>
<ul>
<li>在数据准备好后，以数据组作为回调的唯一参数，通过返回 <code translate="no" class="notranslate text-nowrap">null</code> (或 <code translate="no" class="notranslate text-nowrap">
  未定义</code>) 并调用回调</li>
<li>通过返回解析为数组的<code translate="no" class="notranslate text-nowrap">Promise</code></li>
</ul>
<p>有关更多的消息 <a href="#using-items-provider-functions" class="font-weight-bold"></a> 请参见下面的“使用项目提供程序功能”部分</p>
<h3 id="table-item-notes-and-warnings" class="bv-no-focus-ring"><span class="bd-content-title">表格项目注释和警告<a class="anchorjs-link" href="#table-item-notes-and-warnings" aria-labelledby="table-item-notes-and-warnings"></a></span></h3>
<ul>
<li>避免就地操作记录数据，因为对基础项数据的更改将导致重新呈现行或整个表。请参阅下面的 <a href="#primary-key" class="font-weight-bold">主键</a>以了解最小化Vue重新呈现行的方法。</li>
<li><code translate="no" class="notranslate text-nowrap">items</code> items数组记录应该是一个简单的对象，并且 <strong>必须</strong> 必须避免将可能具有循环引用的数据放在行中的值中。
   <code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code> 将行数据序列化为字符串以进行排序和筛选，循环引用将导致堆栈溢出和应用程序崩溃！</li>
</ul>
<h2 id="fields-column-definitions" class="bv-no-focus-ring"><span class="bd-content-title">字段（列定义）<a class="anchorjs-link" href="#fields-column-definitions" aria-labelledby="fields-column-definitions"></a></span></h2>
<p>The <code translate="no" class="notranslate text-nowrap">fields</code>属性用于自定义表列标题，以及数据列的显示顺序。字段对象键 (i.e. <code translate="no" class="notranslate text-nowrap">age</code> or <code translate="no" class="notranslate text-nowrap">first_name</code> as shown below) are used to
  如下图所示，年龄或名字）用于从每个项目（记录）行中提取值，并提供其他功能，如对列启用排序等。 <a href="#sorting" class="font-weight-bold">sorting</a> on the column, etc.</p>
<p>Fields can be provided as a <em>simple array</em> 字段可以作为简单数组或对象数组提供。<strong>字段数据内部将规范化为 <em>包含列字段数据的事件或槽位将采用规范化字段对象格式（字段的对象数组或单个字段的对象数组）。
</em> format</strong>. 包含该列的事件或广告位<code translate="no" class="notranslate text-nowrap">field</code>字段可以是一个简单的数组，用于定义列的顺序以及要显示的列：<code translate="no" class="notranslate text-nowrap">fields</code>
字段或单个字段的对象</p>
<h3 id="fields-as-a-simple-array" class="bv-no-focus-ring"><span class="bd-content-title">字段作为简单数组<a class="anchorjs-link" href="#fields-as-a-simple-array" aria-labelledby="fields-as-a-simple-array"></a></span></h3>
<p>字段可以是一个简单的数组，用于定义列的顺序以及要显示的列：</p>
<p><strong>列如: 使用 <code translate="no" class="notranslate text-nowrap">数字段</code> 定义组</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-fields-array notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table table-striped table-hover" id="__BVID__866">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">姓氏</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">名字</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">年纪</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Dickerson</td>
<td aria-colindex="2" role="cell" class="">Macdonald</td>
<td aria-colindex="3" role="cell" class="">40</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Larsen</td>
<td aria-colindex="2" role="cell" class="">Shaw</td>
<td aria-colindex="3" role="cell" class="">21</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Geneva</td>
<td aria-colindex="2" role="cell" class="">Wilson</td>
<td aria-colindex="3" role="cell" class="">89</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Jami</td>
<td aria-colindex="2" role="cell" class="">Carney</td>
<td aria-colindex="3" role="cell" class="">38</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">striped</span> <span class="hljs-attr">hover</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-comment">// Note `isActive` is left out and will not appear in the rendered table</span>
        <span class="hljs-attr">fields</span>: [<span class="hljs-string">'first_name'</span>, <span class="hljs-string">'last_name'</span>, <span class="hljs-string">'age'</span>],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Carney'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="fields-as-an-array-of-objects" class="bv-no-focus-ring"><span class="bd-content-title">字段作为对象数组<a class="anchorjs-link" href="#fields-as-an-array-of-objects" aria-labelledby="fields-as-an-array-of-objects"></a></span></h3>
<p>字段可以是对象数组，可以对字段进行其他控制（例如排序，格式化等）。 仅显示出现在字段数组中的列（键）：</p>
<p><strong>示例：使用对象数组字段定义</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-fields-array-of-objects notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table table-striped table-hover" id="__BVID__878">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="">Last Name<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">First Name</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" aria-sort="none" class="table-danger">Person age<span class="sr-only"> (Click to sort Ascending)</span></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Macdonald</td>
<td aria-colindex="2" role="cell" class="">Dickerson</td>
<td aria-colindex="3" role="cell" class="table-danger">40</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Shaw</td>
<td aria-colindex="2" role="cell" class="">Larsen</td>
<td aria-colindex="3" role="cell" class="table-danger">21</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Wilson</td>
<td aria-colindex="2" role="cell" class="">Geneva</td>
<td aria-colindex="3" role="cell" class="table-danger">89</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Carney</td>
<td aria-colindex="2" role="cell" class="">Jami</td>
<td aria-colindex="3" role="cell" class="table-danger">38</td>
</tr>

</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">striped</span> <span class="hljs-attr">hover</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-comment">// Note 'isActive' is left out and will not appear in the rendered table</span>
        <span class="hljs-attr">fields</span>: [
          {
            <span class="hljs-attr">key</span>: <span class="hljs-string">'last_name'</span>,
            <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span>
          },
          {
            <span class="hljs-attr">key</span>: <span class="hljs-string">'first_name'</span>,
            <span class="hljs-attr">sortable</span>: <span class="hljs-literal">false</span>
          },
          {
            <span class="hljs-attr">key</span>: <span class="hljs-string">'age'</span>,
            <span class="hljs-attr">label</span>: <span class="hljs-string">'Person age'</span>,
            <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-comment">// Variant applies to the whole column, including the header and footer</span>
            <span class="hljs-attr">variant</span>: <span class="hljs-string">'danger'</span>
          }
        ],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Carney'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="field-definition-reference" class="bv-no-focus-ring"><span class="bd-content-title">字段定义参考<a class="anchorjs-link" href="#field-definition-reference" aria-labelledby="field-definition-reference"></a></span></h3>
<p>可以识别以下字段属性：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">key</code></td>
<td>String</td>
<td>
  从项目数组中的记录中选择数据的<code translate="no" class="notranslate text-nowrap">key</code>。通过对象数组设置字段时必需。该键还用于生成<a href="#custom-data-rendering" class="font-weight-bold">自定义数据呈现</a>
  和<a href="#header-and-footer-custom-rendering-via-scoped-slots" class="font-weight-bold">自定义页眉和页脚</a>槽名称。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label</code></td>
<td>String</td>
<td>
  显示在列表页眉中（如果设置了<code translate="no" class="notranslate text-nowrap">foot-clone</code>，则显示在页脚中）。
  如果未提供，则默认为字段的键（人性化格式）。可以通过分配空字符串<code translate="no" class="notranslate text-nowrap">""</code> 来使用空标签，
  但请确保还设置了<code translate="no" class="notranslate text-nowrap">headerTitle</code>，以便向未看到的用户提供有关列内容的提示。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">headerTitle</code></td>
<td>String</td>
<td>
  要放置在字段标题<code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>属性 <code translate="no" class="notranslate text-nowrap">title</code>上的文本。
  默认为无<code translate="no" class="notranslate text-nowrap">title</code>属性。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">headerAbbr</code></td>
<td>String</td>
<td>
  要放置在字段标题<code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>属性<code translate="no" class="notranslate text-nowrap">abbr</code>上的文本。
  如果标签（或标题）是缩写，请将其设置为标签（或标题）的未修订版本。默认为无<code translate="no" class="notranslate text-nowrap">abbr</code>属性。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">class</code></td>
<td>String or Array</td>
<td>
  要添加到列中的<code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code> <strong>和</strong> <code translate="no" class="notranslate text-nowrap">&lt;td&gt;</code>的类名（或类名数组）。
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">formatter</code></td>
<td>String or Function</td>
<td>
  可以使用格式化程序回调函数或组件中方法的名称，而不是（或与）作用域字段槽一起使用。将使用语法<code translate="no" class="notranslate text-nowrap">formatter(value, key, item)</code>。
  有关详细信息，请参阅<a href="#custom-data-rendering" class="font-weight-bold">自定义数据呈现</a>。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">sortable</code></td>
<td>Boolean</td>
<td>
  对此列启用排序。有关详细信息，请参阅<a href="#sorting" class="font-weight-bold">排序</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">sortDirection</code></td>
<td>String</td>
<td>
  设置此列排序后的初始排序方向。有关详细信息，请参阅<a href="#change-initial-sort-direction" class="font-weight-bold">更改初始排序方向</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">sortByFormatted</code></td>
<td>Boolean or Function</td>
<td>
  当设置为<code translate="no" class="notranslate text-nowrap">true</code>时，根据字段的<code translate="no" class="notranslate text-nowrap">formatter</code>回调函数的结果对列进行排序。
  默认值为<code translate="no" class="notranslate text-nowrap">false</code>。如果字段没有<code translate="no" class="notranslate text-nowrap">formatter</code>，布尔值无效。
  （可选）接受格式化程序函数引用以格式化值，仅用于排序目的。有关详细信息，请参阅<a href="#sorting" class="font-weight-bold">排序</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">filterByFormatted</code></td>
<td>Boolean or Function</td>
<td>
  当设置为<code translate="no" class="notranslate text-nowrap">true</code>时，根据字段的<code translate="no" class="notranslate text-nowrap">formatter</code>回调函数的结果筛选列。
  默认值为<code translate="no" class="notranslate text-nowrap">false</code>。如果字段没有<code translate="no" class="notranslate text-nowrap">formatter</code>，布尔值无效。
  （可选）接受格式化程序函数引用以格式化值，仅用于筛选目的。有关详细信息，请参阅 <a href="#filtering" class="font-weight-bold">筛选</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tdClass</code></td>
<td>String or Array or Function</td>
<td>
  要添加到列中<code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code>数据 <code translate="no" class="notranslate text-nowrap">&lt;td&gt;</code>单元格的类名（或类名数组）。
  如果每个单元格需要自定义类，则可以指定回调函数。函数将被称为<code translate="no" class="notranslate text-nowrap">tdClass(value, key, item)</code>，它必须返回<code translate="no" class="notranslate text-nowrap">Array</code>或
  <code translate="no" class="notranslate text-nowrap">String</code>。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">thClass</code></td>
<td>String or Array</td>
<td>
  要添加到此字段的 <code translate="no" class="notranslate text-nowrap">&lt;thead&gt;</code>/
  <code translate="no" class="notranslate text-nowrap">&lt;tfoot&gt;</code>标题<code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>单元格的类名（或类名数组）。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">thStyle</code></td>
<td>Object</td>
<td>
  表示要应用于表<code translate="no" class="notranslate text-nowrap">&lt;thead&gt;</code>/<code translate="no" class="notranslate text-nowrap">&lt;tfoot&gt;</code>字段
  <code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>的CSS样式的JavaScript对象。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">variant</code></td>
<td>String</td>
<td>
  对列中的所有<code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code> 
  <strong>和</strong> 
  <code translate="no" class="notranslate text-nowrap">&lt;td&gt;</code>应用上下文类
  <code translate="no" class="notranslate text-nowrap">active</code>, 
  <code translate="no" class="notranslate text-nowrap">success</code>, 
  <code translate="no" class="notranslate text-nowrap">info</code>, 
  <code translate="no" class="notranslate text-nowrap">warning</code>, 
  <code translate="no" class="notranslate text-nowrap">danger</code>。
  这些变量映射到类<code translate="no" class="notranslate text-nowrap">thead-${variant}</code>（在标题中）、
  <code translate="no" class="notranslate text-nowrap">table-${variant}</code>（在正文中）或<code translate="no" class="notranslate text-nowrap">bg-${variant}</code>
  （在设置prop <code translate="no" class="notranslate text-nowrap">dark</code>时）。
  </td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tdAttr</code></td>
<td>Object or Function</td>
<td>
  JavaScript对象，表示要应用于<code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code>>字段<code translate="no" class="notranslate text-nowrap">&lt;td&gt;</code>单元格的其他属性。
  如果需要每个单元格的自定义属性，则可以指定回调函数。函数将被调用为<code translate="no" class="notranslate text-nowrap">tdAttr(value, key, item)</code>，它必须返回一个 <code translate="no" class="notranslate text-nowrap">Object</code>。
  </td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">thAttr</code></td>
<td>Object or Function</td>
<td>
  表示要应用于字段的<code translate="no" class="notranslate text-nowrap">&lt;thead&gt;</code>/<code translate="no" class="notranslate text-nowrap">&lt;tfoot&gt;</code>标题
  <code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>单元格的附加属性的JavaScript对象。
    如果字段的<code translate="no" class="notranslate text-nowrap">isRowHeader</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>，
    属性也将应用于<code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code>字段<code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>单元格。
      如果需要每个单元格的自定义属性，则可以指定回调函数。函数将被调用为 <code translate="no" class="notranslate text-nowrap">thAttr(value, key, item, type)</code>，
      它必须返回一个<code translate="no" class="notranslate text-nowrap">Object</code>。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">isRowHeader</code></td>
<td>Boolean</td>
<td>
  当设置为<code translate="no" class="notranslate text-nowrap">true</code>时，
  字段的项数据单元格将用<code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>而不是默认的<code translate="no" class="notranslate text-nowrap">&lt;td&gt;</code>呈现。
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">stickyColumn</code></td>
<td>Boolean</td>
<td>
  如果设置为<code translate="no" class="notranslate text-nowrap">true</code>，
  并且表处于 <a href="#responsive-tables" class="font-weight-bold">responsive</a> 模式或具有<a href="#sticky-headers" class="font-weight-bold">sticky headers</a>，则当滚动表的水平滚动条时，该列将固定在左侧。有关详细信息，
  请参见<a href="#sticky-columns" class="font-weight-bold">Sticky columns</a>。
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>注意:</strong></p>
<ul>
<li>除非上面另有说明，否则字段属性（如果不存在）默认为 <code translate="no" class="notranslate text-nowrap">空</code> </li>
<li><code translate="no" class="notranslate text-nowrap">class</code>, <code translate="no" class="notranslate text-nowrap">thClass</code>, 
  <code translate="no" class="notranslate text-nowrap">tdClass</code> 不能与在作用域CSS中定义的类一起使用，除非您使用VueLoader的
   <a href="https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements" target="_blank" rel="noopener">深度选择器</a>.</li>
<li>有关 <code translate="no" class="notranslate text-nowrap">thStyle</code>支持的语法的信息，请参见Vue.js指南中的类和样式绑定。
   <a href="https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles" target="_blank" rel="noopener"></a> .</li>
<li>添加到字段定义对象的所有其他属性将保持不变-因此您可以通过命名作用域的插槽访问它们，以用于自定义数据，页眉和页脚呈现。</li>
</ul>
<p>有关作用域插槽和格式化程序的信息和用法，请参阅下面的自定义 <a href="#custom-data-rendering" class="font-weight-bold">数据呈现</a> 部分</p>
<p></p>随意混合和匹配简单数组和对象数组：</p>
<!-- eslint-disable no-unused-vars -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">const</span> fields = [
  { <span class="hljs-attr">key</span>: <span class="hljs-string">'first_name'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'First'</span> },
  { <span class="hljs-attr">key</span>: <span class="hljs-string">'last_name'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Last'</span> },
  <span class="hljs-string">'age'</span>,
  <span class="hljs-string">'sex'</span>
]</pre></figure>
<h2 id="primary-key" class="bv-no-focus-ring"><span class="bd-content-title">主键<a class="anchorjs-link" href="#primary-key" aria-labelledby="primary-key"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code> 提供而外的道具给<code translate="no" class="notranslate text-nowrap">primary-key</code>您可以使用它来标识唯一标识行的字段键的名称。
</p>
<p>主列键指定的值<strong>必须是</strong> either a <code translate="no" class="notranslate text-nowrap">字串符</code> 或者 <code translate="no" class="notranslate text-nowrap">数字</code>, 并且 <strong>是唯一的</strong> 跨表中的所有行。
</p>
<p>主键列不需要出现在显示的字段中。</p>
<h3 id="table-row-id-generation" class="bv-no-focus-ring"><span class="bd-content-title">表格行ID生成<a class="anchorjs-link" href="#table-row-id-generation" aria-labelledby="table-row-id-generation"></a></span></h3>
<p>提供时， <code translate="no" class="notranslate text-nowrap">主键</code> 将为每个项目行<tr>元素生成唯一的ID。
  <code translate="no" class="notranslate text-nowrap">&lt;tr&gt;</code>  该ID的格式为<code translate="no" class="notranslate text-nowrap">{table-id}__row_{primary-key-value}</code>
  ,其中 <code translate="no" class="notranslate text-nowrap">{table-id}</code> 是<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>的唯一ID 并且<code translate="no" class="notranslate text-nowrap">主键</code>指定的字段的项目字段值的最大值。
<h3 id="table-render-and-transition-optimization" class="bv-no-focus-ring"><span class="bd-content-title">表格渲染和过渡优化<a class="anchorjs-link" href="#table-render-and-transition-optimization" aria-labelledby="table-render-and-transition-optimization"></a></span></h3>
<p><b-table> <code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>还使用 <code translate="no" class="notranslate text-nowrap">主键</code>帮助Vue优化表行的呈现。 在内部，由主键prop指定的字段键的值用作每个渲染的项目行<tr>元素的Vue：key值。 <code translate="no" class="notranslate text-nowrap">primary-key</code>  <code translate="no" class="notranslate text-nowrap"></code> <code translate="no" class="notranslate text-nowrap"></code></p>
<p>如果您看到渲染问题（例如，工具提示隐藏或子组件意外重用，
  项目数据更改或数据已排序/过滤/编辑）或表格行转换无效，
 <code translate="no" class="notranslate text-nowrap">主键</code> 道具（如果每行具有唯一的标识符）可以缓解这些问题。</p>
<p>如果您使用的是第三方表转换或拖放插件，则指定主键列很方便，因为它们依赖于每行：key值的一致性和唯一性。
a和拖放插件，因为它们依赖于每行：key值的一致性和唯一性。<code translate="no" class="notranslate text-nowrap">:key</code> value.</p>
<p>
  如果未提供<code translate="no" class="notranslate text-nowrap">primary-key</code>，<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>将根据显示行的索引号（即在显示的表行中的位置）自动生成键。
    这可能会导致GUI问题，例如使用以前的结果进行渲染的子组件/元素（即被Vue的渲染修补程序优化例程重用）。指定<code translate="no" class="notranslate text-nowrap">primary-key</code> 列
    可以缓解此问题（或者可以在自定义格式化字段槽中的元素/组件上放置unique<code translate="no" class="notranslate text-nowrap">:key</code>）。
</p>
<p>
  有关更多详细信息，请参阅<a href="#table-body-transition-support" class="font-weight-bold">表体过度支撑</a>部分。</p>
<h2 id="table-style-options" class="bv-no-focus-ring"><span class="bd-content-title">表格样式选项<a class="anchorjs-link" href="#table-style-options" aria-labelledby="table-style-options"></a></span></h2>
<h3 id="table-styling" class="bv-no-focus-ring"><span class="bd-content-title">表格样式<a class="anchorjs-link" href="#table-styling" aria-labelledby="table-styling"></a></span></h3>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code> 提供几个属性来更改表的样式：</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">striped</code></td>
<td>Boolean</td>
<td>将斑马线添加到<code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">bordered</code></td>
<td>Boolean</td>
<td>用于表格和单元格所有边上的边框。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">borderless</code></td>
<td>Boolean</td>
<td>从表中删除内部边框。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">outlined</code></td>
<td>Boolean</td>
<td>
  在桌子的所有边上画一条细线。如果设置了<code translate="no" class="notranslate text-nowrap">bordered</code>，则不起作用。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">small</code></td>
<td>Boolean</td>
<td>通过将单元格填充减半使表更紧凑。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">hover</code></td>
<td>Boolean</td>
<td>
  在<code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code>中的表行上启用悬停突出显示状态</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">dark</code></td>
<td>Boolean</td>
<td>
  反转颜色-在深色背景上使用浅色文本（相当于Bootstrap v4 class<code translate="no" class="notranslate text-nowrap">.table-dark</code>）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">fixed</code></td>
<td>Boolean</td>
<td>
  生成具有相等固定宽度列的表（<code translate="no" class="notranslate text-nowrap">table-layout: fixed;</code>）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">responsive</code></td>
<td>Boolean or String</td>
<td>
  生成响应表格以使其水平滚动。对于始终响应的表，将其设置为<code translate="no" class="notranslate text-nowrap">true</code>，或将其设置为断点<code translate="no" class="notranslate text-nowrap">'sm'</code>, 
  <code translate="no" class="notranslate text-nowrap">'md'</code>, 
  <code translate="no" class="notranslate text-nowrap">'lg'</code>,和
  <code translate="no" class="notranslate text-nowrap">'xl'</code>，
  以使表仅在小于断点的屏幕上响应（水平滚动）。请参阅下面的<a href="#responsive-tables" class="font-weight-bold">响应表格</a>以了解详细信息。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">sticky-header</code></td>
<td>Boolean or String</td>
<td>
  生成带有粘性标题的垂直可滚动表。设置为<code translate="no" class="notranslate text-nowrap">true</code>可启用粘性标题（默认表最大高度为<code translate="no" class="notranslate text-nowrap">300px</code>px），
  或设置为包含高度的字符串（使用CSS单位）可指定<code translate="no" class="notranslate text-nowrap">300px</code>px以外的最大高度。有关详细信息，请参阅下面的<a href="#sticky-headers" class="font-weight-bold">粘性页眉</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">stacked</code></td>
<td>Boolean or String</td>
<td>
  生成响应堆栈表。对于始终堆叠的表，将其设置为<code translate="no" class="notranslate text-nowrap">true</code>，
  或将其设置为断点<code translate="no" class="notranslate text-nowrap">'sm'</code>, 
  <code translate="no" class="notranslate text-nowrap">'md'</code>, 
  <code translate="no" class="notranslate text-nowrap">'lg'</code>,和 
  <code translate="no" class="notranslate text-nowrap">'xl'</code>之一，以使表仅在小于断点的屏幕上可视堆叠。有关详细信息，请参见下面的<a href="#stacked-tables" class="font-weight-bold">堆叠表格</a>。
  </td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">caption-top</code></td>
<td>Boolean</td>
<td>
  如果table上有标题，并且此属性设置为<code translate="no" class="notranslate text-nowrap">true</code>，则标题将可视地放置在table上方。 
  如果为<code translate="no" class="notranslate text-nowrap">false</code>（默认值），则标题将可视地放置在table下方。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">table-variant</code></td>
<td>String</td>
<td>为表格提供整体主题颜色。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">head-variant</code></td>
<td>String</td>
<td>
  使用<code translate="no" class="notranslate text-nowrap">'light'</code>或<code translate="no" class="notranslate text-nowrap">'dark'</code>分别使表格标题显示为浅色或深灰色
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">foot-variant</code></td>
<td>String</td>
<td>
  使用<code translate="no" class="notranslate text-nowrap">'light'</code>或<code translate="no" class="notranslate text-nowrap">'dark'</code>使表格页脚分别显示为浅灰色或深灰色。 
  如果未设置，将使用<code translate="no" class="notranslate text-nowrap">head-variant</code>。 如果未设置<code translate="no" class="notranslate text-nowrap">foot-clone</code>，则无效
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">foot-clone</code></td>
<td>Boolean</td>
<td>打开表格页脚，并默认使用与表格页眉相同的内容</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">no-footer-sorting</code></td>
<td>Boolean</td>
<td>
  当 <code translate="no" class="notranslate text-nowrap">foot-clone</code>为true并且表可排序时，
  将禁用排序图标和对页脚标题单元格的单击行为。 有关更多详细信息，请参阅下面的<a href="#sorting" class="font-weight-bold">排序</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">no-border-collapse</code></td>
<td>Boolean</td>
<td>
  禁用折叠表格边框的默认设置。 主要用于<a href="#sticky-headers" class="font-weight-bold">sticky headers</a>和/或<a href="#sticky-columns" class="font-weight-bold">sticky columns</a>。 在某些情况下会导致出现双边框。
  </td>
</tr>
</tbody>
</table>
</div>
<p><strong>注意:</strong>
  <code translate="no" class="notranslate text-nowrap">fixed</code>, 
  <code translate="no" class="notranslate text-nowrap">stacked</code>, 
  <code translate="no" class="notranslate text-nowrap">caption-top</code>, 
  <code translate="no" class="notranslate text-nowrap">no-border-collapse</code>，粘性标题，粘性列以及表排序功能的表格样式选项均需要Bootstrap Vue自定义CSS。
</p>
<p><strong>示例： 基本表格样式</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-bordered notranslate">
<div>
<fieldset class="form-group" id="__BVID__890" aria-labelledby="__BVID__890__BV_label_">
<div class="form-row">
<legend tabindex="-1" class="col-lg-2 bv-no-focus-ring col-form-label" id="__BVID__890__BV_label_">Table Options</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring col">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__891">
<label class="custom-control-label" for="__BVID__891">Striped</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__892">
<label class="custom-control-label" for="__BVID__892">Bordered</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__893">
<label class="custom-control-label" for="__BVID__893">Borderless</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__894">
<label class="custom-control-label" for="__BVID__894">Outlined</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__895">
<label class="custom-control-label" for="__BVID__895">Small</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__896">
<label class="custom-control-label" for="__BVID__896">Hover</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__897">
<label class="custom-control-label" for="__BVID__897">Dark</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__898">
<label class="custom-control-label" for="__BVID__898">Fixed</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__899">
<label class="custom-control-label" for="__BVID__899">Foot Clone</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__900">
<label class="custom-control-label" for="__BVID__900">No border collapse</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__901" aria-labelledby="__BVID__901__BV_label_">
<div class="form-row">
<legend tabindex="-1" class="col-lg-2 bv-no-focus-ring col-form-label" id="__BVID__901__BV_label_">Head Variant</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring col">
<div role="radiogroup" tabindex="-1" class="mt-lg-2 bv-no-focus-ring" id="__BVID__902">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="" id="__BVID__903" name="__BVID__902">
<label class="custom-control-label" for="__BVID__903">None</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="light" id="__BVID__904" name="__BVID__902">
<label class="custom-control-label" for="__BVID__904">Light</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="dark" id="__BVID__905" name="__BVID__902">
<label class="custom-control-label" for="__BVID__905">Dark</label>
</div>
</div>
</div>
</div>
</fieldset>
<div role="group" class="form-row form-group" id="__BVID__906">
<label for="table-style-variant" class="col-lg-2 col-form-label" id="__BVID__906__BV_label_">Table Variant</label>
<div class="bv-no-focus-ring col">
<select id="table-style-variant" class="custom-select">
<option value="">-- None --</option>
<option value="primary">primary</option>
<option value="secondary">secondary</option>
<option value="info">info</option>
<option value="danger">danger</option>
<option value="warning">warning</option>
<option value="success">success</option>
<option value="light">light</option>
<option value="dark">dark</option>
</select>
</div>
</div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table" id="__BVID__908">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">First Name</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Last Name</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Age</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Dickerson</td>
<td aria-colindex="2" role="cell" class="">Macdonald</td>
<td aria-colindex="3" role="cell" class="">40</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Larsen</td>
<td aria-colindex="2" role="cell" class="">Shaw</td>
<td aria-colindex="3" role="cell" class="">21</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Geneva</td>
<td aria-colindex="2" role="cell" class="">Wilson</td>
<td aria-colindex="3" role="cell" class="">89</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Table Options"</span> <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"striped"</span> <span class="hljs-attr">inline</span>&gt;</span>Striped<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"bordered"</span> <span class="hljs-attr">inline</span>&gt;</span>Bordered<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"borderless"</span> <span class="hljs-attr">inline</span>&gt;</span>Borderless<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"outlined"</span> <span class="hljs-attr">inline</span>&gt;</span>Outlined<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"small"</span> <span class="hljs-attr">inline</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"hover"</span> <span class="hljs-attr">inline</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"dark"</span> <span class="hljs-attr">inline</span>&gt;</span>Dark<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fixed"</span> <span class="hljs-attr">inline</span>&gt;</span>Fixed<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"footClone"</span> <span class="hljs-attr">inline</span>&gt;</span>Foot Clone<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"noCollapse"</span> <span class="hljs-attr">inline</span>&gt;</span>No border collapse<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Head Variant"</span> <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"headVariant"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-lg-2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"null"</span> <span class="hljs-attr">inline</span>&gt;</span>None<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"light"</span> <span class="hljs-attr">inline</span>&gt;</span>Light<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"dark"</span> <span class="hljs-attr">inline</span>&gt;</span>Dark<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Table Variant"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"table-style-variant"</span> <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"tableVariant"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"tableVariants"</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"table-style-variant"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:first</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>&gt;</span>-- None --<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">:striped</span>=<span class="hljs-string">"striped"</span>
      <span class="hljs-attr">:bordered</span>=<span class="hljs-string">"bordered"</span>
      <span class="hljs-attr">:borderless</span>=<span class="hljs-string">"borderless"</span>
      <span class="hljs-attr">:outlined</span>=<span class="hljs-string">"outlined"</span>
      <span class="hljs-attr">:small</span>=<span class="hljs-string">"small"</span>
      <span class="hljs-attr">:hover</span>=<span class="hljs-string">"hover"</span>
      <span class="hljs-attr">:dark</span>=<span class="hljs-string">"dark"</span>
      <span class="hljs-attr">:fixed</span>=<span class="hljs-string">"fixed"</span>
      <span class="hljs-attr">:foot-clone</span>=<span class="hljs-string">"footClone"</span>
      <span class="hljs-attr">:no-border-collapse</span>=<span class="hljs-string">"noCollapse"</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
      <span class="hljs-attr">:head-variant</span>=<span class="hljs-string">"headVariant"</span>
      <span class="hljs-attr">:table-variant</span>=<span class="hljs-string">"tableVariant"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">fields</span>: [<span class="hljs-string">'first_name'</span>, <span class="hljs-string">'last_name'</span>, <span class="hljs-string">'age'</span>],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> }
        ],
        <span class="hljs-attr">tableVariants</span>: [
          <span class="hljs-string">'primary'</span>,
          <span class="hljs-string">'secondary'</span>,
          <span class="hljs-string">'info'</span>,
          <span class="hljs-string">'danger'</span>,
          <span class="hljs-string">'warning'</span>,
          <span class="hljs-string">'success'</span>,
          <span class="hljs-string">'light'</span>,
          <span class="hljs-string">'dark'</span>
        ],
        <span class="hljs-attr">striped</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">bordered</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">borderless</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">outlined</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">small</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">hover</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">dark</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">fixed</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">footClone</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">headVariant</span>: <span class="hljs-literal">null</span>,
        <span class="hljs-attr">tableVariant</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">noCollapse</span>: <span class="hljs-literal">false</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="row-styling-and-attributes" class="bv-no-focus-ring"><span class="bd-content-title">行样式和属性<a class="anchorjs-link" href="#row-styling-and-attributes" aria-labelledby="row-styling-and-attributes"></a></span></h3>
<p>
  您还可以使用<code translate="no" class="notranslate text-nowrap">tbody-tr-class</code>属性设置每一行的样式，并可以选择通过<code translate="no" class="notranslate text-nowrap">tbody-tr-attr</code>属性提供其他属性：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tbody-tr-class</code></td>
<td>String, Array or Function</td>
<td>
  应用于表上每一行的类。 如果给出了一个函数，它将被称为 <code translate="no" class="notranslate text-nowrap">tbodyTrClass( item, type )</code>，
  并且它可能返回一个<code translate="no" class="notranslate text-nowrap">Array</code>，<code translate="no" class="notranslate text-nowrap">Object</code> 和
  <code translate="no" class="notranslate text-nowrap">String</code>。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tbody-tr-attr</code></td>
<td>Object or Function</td>
<td>
  应用于表上每一行的属性。 如果给出了一个函数，它将被称为<code translate="no" class="notranslate text-nowrap">tbodyTrAttr( item, type )</code>，并且它必须返回一个<code translate="no" class="notranslate text-nowrap">Object</code>。
</td>
</tr>
</tbody>
</table>
</div>
<p>
  将函数引用传递给<code translate="no" class="notranslate text-nowrap">tbody-tr-class</code> 或 
  <code translate="no" class="notranslate text-nowrap">tbody-tr-attr</code>时，该函数的参数如下：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">item</code> - 
  项目记录与行关联的数据。 对于与项目记录不相关的行，此值将为<code translate="no" class="notranslate text-nowrap">null</code>或
  <code translate="no" class="notranslate text-nowrap">undefined</code>
</li>
<li><code translate="no" class="notranslate text-nowrap">type</code> - 
  呈现的行的类型。 <code translate="no" class="notranslate text-nowrap">'row'</code>用于项目行，
  <code translate="no" class="notranslate text-nowrap">'row-details'</code>用于项目明细行，
  <code translate="no" class="notranslate text-nowrap">'row-top'</code>用于固定行顶部插槽，
  <code translate="no" class="notranslate text-nowrap">'row-bottom'</code>用于固定行底部插槽，
  或<code translate="no" class="notranslate text-nowrap">'table-busy'</code>用于table繁忙时段。
</li>
</ul>
<p><strong>示例： 基本行样式</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-styled-row notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table" id="__BVID__919">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">First Name</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Last Name</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Age</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="table-success">
<td aria-colindex="1" role="cell" class="">Dickerson</td>
<td aria-colindex="2" role="cell" class="">Macdonald</td>
<td aria-colindex="3" role="cell" class="">40</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Larsen</td>
<td aria-colindex="2" role="cell" class="">Shaw</td>
<td aria-colindex="3" role="cell" class="">21</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Geneva</td>
<td aria-colindex="2" role="cell" class="">Wilson</td>
<td aria-colindex="3" role="cell" class="">89</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span> <span class="hljs-attr">:tbody-tr-class</span>=<span class="hljs-string">"rowClass"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">fields</span>: [<span class="hljs-string">'first_name'</span>, <span class="hljs-string">'last_name'</span>, <span class="hljs-string">'age'</span>],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span>, <span class="hljs-attr">status</span>: <span class="hljs-string">'awesome'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> }
        ]
      }
    },
    <span class="hljs-attr">methods</span>: {
      rowClass(item, type) {
        <span class="hljs-keyword">if</span> (!item || type !== <span class="hljs-string">'row'</span>) <span class="hljs-keyword">return</span>
        <span class="hljs-keyword">if</span> (item.status === <span class="hljs-string">'awesome'</span>) <span class="hljs-keyword">return</span> <span class="hljs-string">'table-success'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="responsive-tables" class="bv-no-focus-ring"><span class="bd-content-title">响应表格<a class="anchorjs-link" href="#responsive-tables" aria-labelledby="responsive-tables"></a></span></h3>
<p>
  响应式表格允许轻松地水平滚动表。 通过将prop设置为<code translate="no" class="notranslate text-nowrap">true</code>，
  使所有表在所有视口中都具有<code translate="no" class="notranslate text-nowrap">responsive</code>。 
  或者，通过将prop设置为响应以下断点值之一来选择最大响应点，以使其具有<code translate="no" class="notranslate text-nowrap">responsive</code>：
  <code translate="no" class="notranslate text-nowrap">sm</code>, 
<code translate="no" class="notranslate text-nowrap">md</code>,
 <code translate="no" class="notranslate text-nowrap">lg</code>, 或
  <code translate="no" class="notranslate text-nowrap">xl</code>.
</p>
<p><strong>示例： 始终响应表格</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-responsive notranslate">
<div>
<div class="table-responsive">
<table role="table" aria-busy="false" aria-colcount="12" class="table b-table" id="__BVID__930">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Heading1</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Heading2</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Heading3</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">Heading4</th>
<th role="columnheader" scope="col" aria-colindex="5" class="">Heading5</th>
<th role="columnheader" scope="col" aria-colindex="6" class="">Heading6</th>
<th role="columnheader" scope="col" aria-colindex="7" class="">Heading7</th>
<th role="columnheader" scope="col" aria-colindex="8" class="">Heading8</th>
<th role="columnheader" scope="col" aria-colindex="9" class="">Heading9</th>
<th role="columnheader" scope="col" aria-colindex="10" class="">Heading10</th>
<th role="columnheader" scope="col" aria-colindex="11" class="">Heading11</th>
<th role="columnheader" scope="col" aria-colindex="12" class="">Heading12</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
<td aria-colindex="4" role="cell" class="">table cell</td>
<td aria-colindex="5" role="cell" class="">table cell</td>
<td aria-colindex="6" role="cell" class="">table cell</td>
<td aria-colindex="7" role="cell" class="">table cell</td>
<td aria-colindex="8" role="cell" class="">table cell</td>
<td aria-colindex="9" role="cell" class="">table cell</td>
<td aria-colindex="10" role="cell" class="">table cell</td>
<td aria-colindex="11" role="cell" class="">table cell</td>
<td aria-colindex="12" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
<td aria-colindex="4" role="cell" class="">table cell</td>
<td aria-colindex="5" role="cell" class="">table cell</td>
<td aria-colindex="6" role="cell" class="">table cell</td>
<td aria-colindex="7" role="cell" class="">table cell</td>
<td aria-colindex="8" role="cell" class="">table cell</td>
<td aria-colindex="9" role="cell" class="">table cell</td>
<td aria-colindex="10" role="cell" class="">table cell</td>
<td aria-colindex="11" role="cell" class="">table cell</td>
<td aria-colindex="12" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
<td aria-colindex="4" role="cell" class="">table cell</td>
<td aria-colindex="5" role="cell" class="">table cell</td>
<td aria-colindex="6" role="cell" class="">table cell</td>
<td aria-colindex="7" role="cell" class="">table cell</td>
<td aria-colindex="8" role="cell" class="">table cell</td>
<td aria-colindex="9" role="cell" class="">table cell</td>
<td aria-colindex="10" role="cell" class="">table cell</td>
<td aria-colindex="11" role="cell" class="">table cell</td>
<td aria-colindex="12" role="cell" class="">table cell</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">responsive</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">items</span>: [
          {
            <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading4</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading5</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading6</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading7</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading8</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading9</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading10</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading11</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading12</span>: <span class="hljs-string">'table cell'</span>
          },
          {
            <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading4</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading5</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading6</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading7</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading8</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading9</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading10</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading11</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading12</span>: <span class="hljs-string">'table cell'</span>
          },
          {
            <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading4</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading5</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading6</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading7</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading8</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading9</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading10</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading11</span>: <span class="hljs-string">'table cell'</span>,
            <span class="hljs-attr">heading12</span>: <span class="hljs-string">'table cell'</span>
          }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>响应表格注释：</strong></p>
<ul>
<li>
  <em>可能的垂直剪切/截断。</em> 响应表格使用<code translate="no" class="notranslate text-nowrap">overflow-y: hidden</code>，它会剪裁超出表底部或顶部边缘的所有内容。 特别是，这可能会剪切下拉菜单和其他第三方小部件。
</li>
<li>
  使用<code translate="no" class="notranslate text-nowrap">responsive</code>和 
  <code translate="no" class="notranslate text-nowrap">fixed</code>在一起的属性将<strong>无法</strong>正常工作。 固定表格布局使用第一行（在这种情况下为表格标题）来计算每一列所需的宽度（以及表格的整体宽度）以适合父容器的宽度-无需考虑
  <code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code>中的单元格- 导致表可能没有响应。 要解决此限制，您将需要通过以下方法之一为列（或某些列）指定宽度：
<ul>
<li>
  在 <a href="#table-colgroup" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">table-colgroup</code> slot</a>中使用已设置宽度的
  <code translate="no" class="notranslate text-nowrap">&lt;col&gt;</code>元素
  （例如<code translate="no" class="notranslate text-nowrap">&lt;col style="width: 20rem"&gt;</code>），或
</li>
<li>
  通过使用<a href="#header-and-footer-custom-rendering-via-scoped-slots" class="font-weight-bold">custom header rendering</a>将标头单元格包裹在<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>元素中，并在其上设置最小宽度，或者
</li>
<li>
  使用<a href="#field-definition-reference" class="font-weight-bold">field definition object</a>的<code translate="no" class="notranslate text-nowrap">thStyle</code>属性设置列的宽度，或者
</li>
<li>
  通过<a href="#field-definition-reference" class="font-weight-bold">field definition object</a>的<code translate="no" class="notranslate text-nowrap">thClass</code>或<code translate="no" class="notranslate text-nowrap">class</code>属性，
  使用自定义CSS定义要应用于列以设置宽度的类。
</li>
</ul>
</li>
</ul>
<h3 id="stacked-tables" class="bv-no-focus-ring"><span class="bd-content-title">堆叠表格<a class="anchorjs-link" href="#stacked-tables" aria-labelledby="stacked-tables"></a></span></h3>
<p>
  作为响应表格的替代方法，BootstrapVue包括堆叠表格选项（使用自定义SCSS / CSS），该选项允许以可视堆叠格式呈现表。 通过将属性<code translate="no" class="notranslate text-nowrap">stacked</code>
  设置为<code translate="no" class="notranslate text-nowrap">true</code>，可以在所有视口中堆叠任何表格。 或者，通过将<code translate="no" class="notranslate text-nowrap">stacked</code>的prop设置为断点值
  <code translate="no" class="notranslate text-nowrap">'sm'</code>, 
  <code translate="no" class="notranslate text-nowrap">'md'</code>, 
  <code translate="no" class="notranslate text-nowrap">'lg'</code>和
  <code translate="no" class="notranslate text-nowrap">'xl'</code>.之一来设置断点，表将在该断点处恢复为正常的表格式。
</p>
<p>
  列标题标签将使用CSS <code translate="no" class="notranslate text-nowrap">::before</code>伪元素呈现在每个字段值的左侧，宽度为40％。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">stacked</code>的属性优先于响应式道具，<a href="#sticky-headers" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">sticky-header</code></a>属性
  和<a href="#sticky-columns" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">stickyColumn</code></a>字段定义属性。
</p>
<p><strong>示例： Always 堆积表</strong>

</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-stacked notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table b-table-stacked" id="__BVID__950" aria-describedby="__BVID__950__caption_">
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" data-label="Age" role="cell" class=""><div>40</div></td>
<td aria-colindex="2" data-label="First Name" role="cell" class=""><div>Dickerson</div></td>
<td aria-colindex="3" data-label="Last Name" role="cell" class=""><div>Macdonald</div></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" data-label="Age" role="cell" class=""><div>21</div></td>
<td aria-colindex="2" data-label="First Name" role="cell" class=""><div>Larsen</div></td>
<td aria-colindex="3" data-label="Last Name" role="cell" class=""><div>Shaw</div></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" data-label="Age" role="cell" class=""><div>89</div></td>
<td aria-colindex="2" data-label="First Name" role="cell" class=""><div>Geneva</div></td>
<td aria-colindex="3" data-label="Last Name" role="cell" class=""><div>Wilson</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">stacked</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>注意: 当table被视觉上堆叠时：</strong></p>
<ul>
<li>表格标题（和表格页脚）将被隐藏。</li>
<li>
  自定义呈现的标题槽将不会显示，而是使用字段的<code translate="no" class="notranslate text-nowrap">label</code>。
</li>
<li>
  无法通过单击呈现的字段标签对表进行排序。 您将需要提供一个外部控件来选择要排序的字段和排序方向。 有关对控件信息进行排序的信息，请参见下面的<a href="#sorting" class="font-weight-bold">Sorting</a>部分；
  对于使用表单控件来控制排序的示例，请参见本页底部的<a href="#complete-example" class="font-weight-bold"> 完整实例</a>。
</li>
<li>
  在视觉上堆叠时，<code translate="no" class="notranslate text-nowrap">top-row</code>和<code translate="no" class="notranslate text-nowrap">bottom-row</code>排插槽将被隐藏
</li>
<li>
  表格标题（如果提供）在视觉上堆叠时将始终显示在表格的顶部。
</li>
<li>在始终堆叠的表中，表的页眉和页脚以及固定的顶部和底部行插槽 将不会被渲染。</li>
</ul>
<p>为了支持堆叠表格，需要BootstrapVue的自定义CSS。</p>
<h3 id="table-caption" class="bv-no-focus-ring"><span class="bd-content-title">表格标题<a class="anchorjs-link" href="#table-caption" aria-labelledby="table-caption"></a></span></h3>
<p>
  通过属性<code translate="no" class="notranslate text-nowrap">caption</code>或命名的slot <code translate="no" class="notranslate text-nowrap">table-caption</code>（插槽优先于prop），向表中添加可选标题。 默认的Bootstrap v4样式将标题放在表格的底部：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-caption notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table" id="__BVID__956">
<caption>
This is a table caption.
</caption>
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">First Name</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Last Name</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Age</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Dickerson</td>
<td aria-colindex="2" role="cell" class="">Macdonald</td>
<td aria-colindex="3" role="cell" class="">40</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Larsen</td>
<td aria-colindex="2" role="cell" class="">Shaw</td>
<td aria-colindex="3" role="cell" class="">21</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Geneva</td>
<td aria-colindex="2" role="cell" class="">Wilson</td>
<td aria-colindex="3" role="cell" class="">89</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:table-caption</span>&gt;</span>This is a table caption.<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">fields</span>: [<span class="hljs-string">'first_name'</span>, <span class="hljs-string">'last_name'</span>, <span class="hljs-string">'age'</span>],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  您可以通过将<code translate="no" class="notranslate text-nowrap">caption-top</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>来将标题放置在表格的顶部：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-caption-top notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table b-table-caption-top" id="__BVID__967">
<caption>
This is a table caption at the top.
</caption>
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">First Name</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Last Name</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Age</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Dickerson</td>
<td aria-colindex="2" role="cell" class="">Macdonald</td>
<td aria-colindex="3" role="cell" class="">40</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Larsen</td>
<td aria-colindex="2" role="cell" class="">Shaw</td>
<td aria-colindex="3" role="cell" class="">21</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Geneva</td>
<td aria-colindex="2" role="cell" class="">Wilson</td>
<td aria-colindex="3" role="cell" class="">89</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span> <span class="hljs-attr">caption-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:table-caption</span>&gt;</span>This is a table caption at the top.<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">fields</span>: [<span class="hljs-string">'first_name'</span>, <span class="hljs-string">'last_name'</span>, <span class="hljs-string">'age'</span>],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  您还可以使用<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side" target="_blank" rel="noopener">自定义 CSS</a>来控制字幕的位置。
</p>
<h3 id="table-colgroup" class="bv-no-focus-ring"><span class="bd-content-title">表格 colgroup<a class="anchorjs-link" href="#table-colgroup" aria-labelledby="table-colgroup"></a></span></h3>
<p><code translate="no" class="notranslate text-nowrap">table-colgroup</code> 为表列的可选分组和样式指定
  <code translate="no" class="notranslate text-nowrap">&lt;colgroup&gt;</code>和 
  <code translate="no" class="notranslate text-nowrap">&lt;col&gt;</code>元素。 
    请注意，通过<code translate="no" class="notranslate text-nowrap">&lt;col&gt;</code>元素可用的样式是有限的。 
    有关<code translate="no" class="notranslate text-nowrap">&lt;colgroup&gt;</code>的详细信息和用法，
    请参考<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup" target="_blank" rel="noopener">MDN</a>
</p>
<p>
  插槽<code translate="no" class="notranslate text-nowrap">table-colgroup</code>可以选择范围，接收具有以下属性的对象：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">columns</code></td>
<td>Number</td>
<td>呈现表中的列数</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">fields</code></td>
<td>Array</td>
<td>
  字段定义对象数组（标准化为对<a href="#fields-as-an-array-of-objects" class="font-weight-bold">array of objects</a>）
</td>
</tr>
</tbody>
</table>
</div>
<p>
  提供时， <code translate="no" class="notranslate text-nowrap">table-colgroup</code>插槽的内容将放置在<colgroup>元素内。 
    无需提供您自己的外部<code translate="no" class="notranslate text-nowrap">&lt;colgroup&gt;</code>元素。 
    如果出于辅助技术的原因应将一系列表列分组（为了传达逻辑列关联，请使用<code translate="no" class="notranslate text-nowrap">&lt;col span="#"&gt;</code>元素（用<code translate="no" class="notranslate text-nowrap">#</code>替换为分组列的数量）来对一系列列进行分组。
</p>
<p><strong>提示:</strong> 
  在某些情况下，当尝试通过<col>元素上的 <code translate="no" class="notranslate text-nowrap">style</code>或
  <code translate="no" class="notranslate text-nowrap">class</code>设置列宽时，您可能会发现将表置于<code translate="no" class="notranslate text-nowrap">固定</code>标题宽度（表固定布局模式）模式与<code translate="no" class="notranslate text-nowrap">responsive</code>（水平滚动）模式结合使用会有所帮助，尽管您将需要通过样式或类为每个列的相应<code translate="no" class="notranslate text-nowrap">&lt;col&gt;</code>元素设置显式宽度或最小宽度。例如：
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">fixed</span> <span class="hljs-attr">responsive</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span> <span class="hljs-attr">...</span> &gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:table-colgroup</span>=<span class="hljs-string">"scope"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">col</span>
      <span class="hljs-attr">v-for</span>=<span class="hljs-string">"field in scope.fields"</span>
      <span class="hljs-attr">:key</span>=<span class="hljs-string">"field.key"</span>
      <span class="hljs-attr">:style</span>=<span class="hljs-string">"{ width: field.key === 'foo' ? '120px' : '180px' }"</span>
    &gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- additional table slots here if needed --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span></pre></figure>
<h3 id="table-busy-state" class="bv-no-focus-ring"><span class="bd-content-title">表格忙碌状态<a class="anchorjs-link" href="#table-busy-state" aria-labelledby="table-busy-state"></a></span></h3>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>提供了一个忙碌属性，它将把table标记为<code translate="no" class="notranslate text-nowrap">busy</code>，您可以在更新商品之前将其设置为<code translate="no" class="notranslate text-nowrap">true</code>，然后在拥有商品后将其设置为<code translate="no" class="notranslate text-nowrap">false</code>。当处于繁忙状态时，该表将具有属性<code translate="no" class="notranslate text-nowrap">aria-busy="true"</code>。
</p>
<p>
  在繁忙状态期间，将使用以下自定义CSS将表呈现为“静音”外观（<code translate="no" class="notranslate text-nowrap">opacity: 0.6</code>）：
</p>
<figure class="highlight"><pre class="hljs css text-monospace p-2 notranslate" translate="no"><span class="hljs-comment">/* Busy table styling */</span>
<span class="hljs-selector-tag">table</span><span class="hljs-selector-class">.b-table</span><span class="hljs-selector-attr">[aria-busy=<span class="hljs-string">'true'</span>]</span> {
  <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.6</span>;
}</pre></figure>
<p>您可以使用自己的CSS覆盖此样式。</p>
<p>
  您可以选择提供一个<code translate="no" class="notranslate text-nowrap">table-busy</code>
  插槽，以在表的忙状态为真时显示自定义加载消息或微调框。 该插槽将放置在
  <code translate="no" class="notranslate text-nowrap">b-table-busy-slot</code>类的
  <code translate="no" class="notranslate text-nowrap">&lt;tr&gt;</code>元素中，该元素具有一个单个<code translate="no" class="notranslate text-nowrap">&lt;td&gt;</code>
  ，且<code translate="no" class="notranslate text-nowrap">colspan</code>设置为字段数。
</p>
<p><strong>表格<code translate="no" class="notranslate text-nowrap">table-busy</code>用法:</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-busy-slot notranslate">
<div>
<button type="button" class="btn btn-secondary">Toggle Busy State</button>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table mt-3 border" id="__BVID__978">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">First Name</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Last Name</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Age</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Dickerson</td>
<td aria-colindex="2" role="cell" class="">MacDonald</td>
<td aria-colindex="3" role="cell" class="">40</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Larsen</td>
<td aria-colindex="2" role="cell" class="">Shaw</td>
<td aria-colindex="3" role="cell" class="">21</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Geneva</td>
<td aria-colindex="2" role="cell" class="">Wilson</td>
<td aria-colindex="3" role="cell" class="">89</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Jami</td>
<td aria-colindex="2" role="cell" class="">Carney</td>
<td aria-colindex="3" role="cell" class="">38</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggleBusy"</span>&gt;</span>Toggle Busy State<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">:busy</span>=<span class="hljs-string">"isBusy"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span> <span class="hljs-attr">outlined</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:table-busy</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center text-danger my-2"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-spinner</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"align-middle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-spinner</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Loading...<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">isBusy</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'MacDonald'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span> },
          { <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span> },
          { <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">89</span> },
          { <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Carney'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span> }
        ]
      }
    },
    <span class="hljs-attr">methods</span>: {
      toggleBusy() {
        <span class="hljs-keyword">this</span>.isBusy = !<span class="hljs-keyword">this</span>.isBusy
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  另请参阅下面的<a href="#using-items-provider-functions" class="font-weight-bold">使用项目提供程序功能</a>以获取有关<code translate="no" class="notranslate text-nowrap">busy</code>状态的其他信息。
</p>
<p><strong>注意:</strong>

</p>
<ul>
<li>
  当表处于<code translate="no" class="notranslate text-nowrap">busy</code>状态时，将<strong>不</strong>发出所有与单击相关的事件和悬停事件，以及排序已更改的事件。
</li>
<li>
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>组件中没有忙碌的样式和插槽。
</li>
</ul>
<h2 id="custom-data-rendering" class="bv-no-focus-ring"><span class="bd-content-title">自定义数据渲染<a class="anchorjs-link" href="#custom-data-rendering" aria-labelledby="custom-data-rendering"></a></span></h2>
<p>
  可以使用<a href="http://vuejs.org/v2/guide/components.html#Scoped-Slots" target="_blank" rel="noopener">scoped slots</a>或格式化程序回调函数或两者结合来为行中的每个数据字段自定义呈现。
</p>
<h3 id="scoped-field-slots" class="bv-no-focus-ring"><span class="bd-content-title">范围字段插槽<a class="anchorjs-link" href="#scoped-field-slots" aria-labelledby="scoped-field-slots"></a></span></h3>
<p>
  范围字段槽使您可以更好地控制记录数据的显示方式。 您可以使用作用域内的插槽为特定字段提供自定义呈现。 如果要添加记录中不存在的额外字段，
  只需将其添加到<a href="#fields-column-definitions" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">fields</code>
  </a>数组，然后在作用域插槽中引用该字段。 范围字段槽使用以下命名语法：<code translate="no" class="notranslate text-nowrap">'cell(' + field key + ')'</code>。
</p>
<p>
  您可以使用默认的后备作用域作用域插槽<code translate="no" class="notranslate text-nowrap">'cell()'</code>来格式化没有提供显式作用域插槽的所有单元格。
</p>
<p><strong>示例： 具有作用域插槽的自定义数据呈现</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-data-slots notranslate">
<div>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="5" class="table b-table table-sm" id="__BVID__990">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Index</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Full Name</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Age</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">Sex</th>
<th role="columnheader" scope="col" aria-colindex="5" class="">First name and age</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""> 1 </td>
<td aria-colindex="2" role="cell" class=""><b class="text-info">DOE</b>, <b>John</b></td>
<td aria-colindex="3" role="cell" class=""><i>42</i></td>
<td aria-colindex="4" role="cell" class=""><i>Male</i></td>
<td aria-colindex="5" role="cell" class=""> John is 42 years old </td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""> 2 </td>
<td aria-colindex="2" role="cell" class=""><b class="text-info">DOE</b>, <b>Jane</b></td>
<td aria-colindex="3" role="cell" class=""><i>36</i></td>
<td aria-colindex="4" role="cell" class=""><i>Female</i></td>
<td aria-colindex="5" role="cell" class=""> Jane is 36 years old </td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""> 3 </td>
<td aria-colindex="2" role="cell" class=""><b class="text-info">KINCADE</b>, <b>Rubin</b></td>
<td aria-colindex="3" role="cell" class=""><i>73</i></td>
<td aria-colindex="4" role="cell" class=""><i>Male</i></td>
<td aria-colindex="5" role="cell" class=""> Rubin is 73 years old </td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""> 4 </td>
<td aria-colindex="2" role="cell" class=""><b class="text-info">PARTRIDGE</b>, <b>Shirley</b></td>
<td aria-colindex="3" role="cell" class=""><i>62</i></td>
<td aria-colindex="4" role="cell" class=""><i>Female</i></td>
<td aria-colindex="5" role="cell" class=""> Shirley is 62 years old </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">small</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">responsive</span>=<span class="hljs-string">"sm"</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- A virtual column --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">index</span>)=<span class="hljs-string">"data"</span>&gt;</span>
        {{ data.index + 1 }}
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- A custom formatted column --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">name</span>)=<span class="hljs-string">"data"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-info"</span>&gt;</span>{{ data.value.last.toUpperCase() }}<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>, <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>{{ data.value.first }}<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- A virtual composite column --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">nameage</span>)=<span class="hljs-string">"data"</span>&gt;</span>
        {{ data.item.name.first }} is {{ data.item.age }} years old
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- Optional default data cell scoped slot --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>()=<span class="hljs-string">"data"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>{{ data.value }}<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">fields</span>: [
          <span class="hljs-comment">// A virtual column that doesn't exist in items</span>
          <span class="hljs-string">'index'</span>,
          <span class="hljs-comment">// A column that needs custom formatting</span>
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'name'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Full Name'</span> },
          <span class="hljs-comment">// A regular column</span>
          <span class="hljs-string">'age'</span>,
          <span class="hljs-comment">// A regular column</span>
          <span class="hljs-string">'sex'</span>,
          <span class="hljs-comment">// A virtual column made up from two fields</span>
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'nameage'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'First name and age'</span> }
        ],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Doe'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Male'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">42</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Jane'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Doe'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Female'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">36</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Rubin'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Kincade'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Male'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">73</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Shirley'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Partridge'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Female'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">62</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  
  插槽的范围变量（上述示例中的<code translate="no" class="notranslate text-nowrap">data</code>）将具有以下属性：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">index</code></td>
<td>Number</td>
<td>相对于显示行的行号（从零开始索引）</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">item</code></td>
<td>Object</td>
<td>
  该行的全部原始记录数据（即<code translate="no" class="notranslate text-nowrap">items[index]</code>）（在应用任何格式化程序之前）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">value</code></td>
<td>Any</td>
<td>
  记录中此键的值（如果为虚拟列，则为<code translate="no" class="notranslate text-nowrap">null</code>或 
  <code translate="no" class="notranslate text-nowrap">undefined</code>），或字段的<a href="#formatter-callback" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">格式化程序</code> 功能</a>的输出
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">unformatted</code></td>
<td>Any</td>
<td>
  在传递给字段的<a href="#formatter-callback" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">格式化程序</code> 功能</a>之前，
该键在项目记录中的原始值（如果为虚拟列，则为<code translate="no" class="notranslate text-nowrap">null</code>或 
<code translate="no" class="notranslate text-nowrap">undefined</code>）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">field</code></td>
<td>Object</td>
<td>字段的规范化字段定义对象</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">detailsShowing</code></td>
<td>Boolean</td>
<td>
  如果该行的<code translate="no" class="notranslate text-nowrap">row-details</code>范围的广告位可见，
则为<code translate="no" class="notranslate text-nowrap">true</code>。有关其他信息，请参见下面的 <code translate="no" class="notranslate text-nowrap">row-details</code> scoped slot is visible. See section <a href="#row-details-support" class="font-weight-bold">行详情信息支持</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">toggleDetails</code></td>
<td>Function</td>
<td>
  可以调用此选项来切换行的 <code translate="no" class="notranslate text-nowrap">row-details</code> 范围的作用域插槽。 有关其他信息，请参见下面的<a href="#row-details-support" class="font-weight-bold">行详情信息支持</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">rowSelected</code></td>
<td>Boolean</td>
<td>
  如果已选择该行，则为<code translate="no" class="notranslate text-nowrap">true</code>。有关其他信息，请参见<a href="#row-select-support" class="font-weight-bold">行选择支持</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">selectRow</code></td>
<td>Function</td>
<td>
  调用时，选择当前行。 有关其他信息，请参见<a href="#row-select-support" class="font-weight-bold">行选择支持</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">unselectRow</code></td>
<td>Function</td>
<td>
  调用时，取消选择当前行。 有关其他信息，请参见<a href="#row-select-support" class="font-weight-bold">行选择支持</a>部分。
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>注意:</strong></p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">index</code>
  并非总是实际行的索引号，因为它是在对原始表数据应用了过滤，排序和分页之后计算的。 <code translate="no" class="notranslate text-nowrap">index</code>值将参考<strong>显示的行号</strong>。
该数字将与可选<a href="#v-model-binding" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">v-model</code> 绑定</a>变量的索引对齐。
</li>
<li>
  在使用新的Vue 2.6 <code translate="no" class="notranslate text-nowrap">v-slot</code>语法时，请注意，插槽名称<strong>不能</strong>
  包含空格，并且在使用浏览器内DOM模板时，插槽名称将始终小写。 为了解决这个问题，您可以使用Vue的<a href="https://vuejs.org/v2/guide/components-slots.html#Dynamic-Slot-Names" target="_blank" rel="noopener">dynamic slot names</a>。
</li>
</ul>
<h4 id="displaying-raw-html" class="bv-no-focus-ring"><span class="bd-content-title">显示原始HTML<a class="anchorjs-link" href="#displaying-raw-html" aria-labelledby="displaying-raw-html"></a></span></h4>
<p>
  默认情况下，<code translate="no" class="notranslate text-nowrap">b-table</code>
会在item数据和格式化程序功能的结果中转义HTML标记，如果需要在<code translate="no" class="notranslate text-nowrap">b-table</code>
中显示原始HTML代码，则应在作用域内的字段插槽中的元素上使用<code translate="no" class="notranslate text-nowrap">v-html</code>指令。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-html-data-slots notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table" id="__BVID__1004">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Text</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Html</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">This is &lt;i&gt;escaped&lt;/i&gt; content</td>
<td aria-colindex="2" role="cell" class=""><span>This is <i>raw <strong>HTML</strong></i> <span style="color:red">content</span></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">html</span>)=<span class="hljs-string">"data"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"data.value"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="xml">
  export default {
    data() {
      return {
        items: [
          {
            text: 'This is <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>escaped<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> content',
            html: 'This is <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>raw <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:red"</span>&gt;</span>content<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>'
          }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p class="alert alert-danger"> <strong>警告:</strong> 
  请谨慎使用<code class="notranslate" translate="no">v-html</code>方法显示用户提供的内容，因为这可能会使您的应用程序容易受到<a class="alert-link" href="https://en.wikipedia.org/wiki/Cross-site_scripting"> <abbr title="Cross Site Scripting Attacks">XSS 攻击</abbr></a>
</p>
<h3 id="formatter-callback" class="bv-no-focus-ring"><span class="bd-content-title">格式化程序回调<a class="anchorjs-link" href="#formatter-callback" aria-labelledby="formatter-callback"></a></span></h3>
<p>
  （可选）您可以使用格式化程序回调函数来自定义字段输出。 为此，使用了字段的<code translate="no" class="notranslate text-nowrap">formatter</code>属性。
此属性的值可以是String或函数引用。 如果为String值，则必须在父组件的方法中定义函数。 在将格式化程序作为函数提供时，除非已绑定到此上下文，否则必须在全局范围（在Vue的窗口或在Vue上作为全局mixin或作为匿名函数）进行声明。
</p>
<p>
  回调函数接受三个参数-<code translate="no" class="notranslate text-nowrap">value</code>, <code translate="no" class="notranslate text-nowrap">key</code>,和 
  <code translate="no" class="notranslate text-nowrap">item</code>，并且应以字符串形式返回格式化的值（不支持HTML字符串）
</p>
<p><strong>示例： 使用格式化程序回调函数自定义数据呈现</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-data-formatter notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table" id="__BVID__1012">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Full Name</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Age</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Sex</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">Calculated Birth Year</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><a href="#john-doe">John Doe</a></td>
<td aria-colindex="2" role="cell" class="">42</td>
<td aria-colindex="3" role="cell" class="">M</td>
<td aria-colindex="4" role="cell" class="">1978</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><a href="#jane-doe">Jane Doe</a></td>
<td aria-colindex="2" role="cell" class="">36</td>
<td aria-colindex="3" role="cell" class="">F</td>
<td aria-colindex="4" role="cell" class="">1984</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><a href="#rubin-kincade">Rubin Kincade</a></td>
<td aria-colindex="2" role="cell" class="">73</td>
<td aria-colindex="3" role="cell" class="">M</td>
<td aria-colindex="4" role="cell" class="">1947</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><a href="#shirley-partridge">Shirley Partridge</a></td>
<td aria-colindex="2" role="cell" class="">62</td>
<td aria-colindex="3" role="cell" class="">F</td>
<td aria-colindex="4" role="cell" class="">1958</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">name</span>)=<span class="hljs-string">"data"</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- `data.value` is the value after formatted by the Formatter --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">:href</span>=<span class="hljs-string">"`#${data.value.replace(/[^a-z]+/i,'-').toLowerCase()}`"</span>&gt;</span>{{ data.value }}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">fields</span>: [
          {
            <span class="hljs-comment">// A column that needs custom formatting,</span>
            <span class="hljs-comment">// calling formatter 'fullName' in this app</span>
            <span class="hljs-attr">key</span>: <span class="hljs-string">'name'</span>,
            <span class="hljs-attr">label</span>: <span class="hljs-string">'Full Name'</span>,
            <span class="hljs-attr">formatter</span>: <span class="hljs-string">'fullName'</span>
          },
          <span class="hljs-comment">// A regular column</span>
          <span class="hljs-string">'age'</span>,
          {
            <span class="hljs-comment">// A regular column with custom formatter</span>
            <span class="hljs-attr">key</span>: <span class="hljs-string">'sex'</span>,
            <span class="hljs-attr">formatter</span>: <span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> {
              <span class="hljs-keyword">return</span> value.charAt(<span class="hljs-number">0</span>).toUpperCase()
            }
          },
          {
            <span class="hljs-comment">// A virtual column with custom formatter</span>
            <span class="hljs-attr">key</span>: <span class="hljs-string">'birthYear'</span>,
            <span class="hljs-attr">label</span>: <span class="hljs-string">'Calculated Birth Year'</span>,
            <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">value, key, item</span>) =&gt;</span> {
              <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getFullYear() - item.age
            }
          }
        ],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Doe'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Male'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">42</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Jane'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Doe'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Female'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">36</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Rubin'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Kincade'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'male'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">73</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Shirley'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Partridge'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'female'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">62</span> }
        ]
      }
    },
    <span class="hljs-attr">methods</span>: {
      fullName(value) {
        <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${value.first}</span> <span class="hljs-subst">${value.last}</span>`</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="header-and-footer-custom-rendering-via-scoped-slots" class="bv-no-focus-ring"><span class="bd-content-title">通过作用域插槽的页眉和页脚自定义呈现<a class="anchorjs-link" href="#header-and-footer-custom-rendering-via-scoped-slots" aria-labelledby="header-and-footer-custom-rendering-via-scoped-slots"></a></span></h2>
<p>
  还可以为表格<code translate="no" class="notranslate text-nowrap">thead</code>和 
  <code translate="no" class="notranslate text-nowrap">tfoot</code>元素提供自定义呈现。 请注意，默认情况下，除非将
  <code translate="no" class="notranslate text-nowrap">foot-clone</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>，否则不会呈现表页脚。
</p>
<p>
  页眉和页脚单元格的作用域插槽分别使用特殊的命名约定<code translate="no" class="notranslate text-nowrap">'head(&lt;fieldkey&gt;)'</code>和
  <code translate="no" class="notranslate text-nowrap">'foot(&lt;fieldkey&gt;)'</code>。 如果未提供字段的
  <code translate="no" class="notranslate text-nowrap">'foot(...)'</code>插槽，但提供了
  <code translate="no" class="notranslate text-nowrap">'head(...)'</code>插槽，则页脚将使用
  <code translate="no" class="notranslate text-nowrap">'head(...)'</code>插槽内容。
</p>
<p>
  您可以使用默认的后备作用域作用域插槽<code translate="no" class="notranslate text-nowrap">'head()'</code>和<code translate="no" class="notranslate text-nowrap">'foot()'</code>来格式化没有提供显式作用域插槽的任何页眉或页脚单元格。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-head-foot-slots notranslate">
<div>
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table" id="__BVID__1025">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class=""><span class="text-info">FULL NAME</span></th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Age</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Sex</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""> John Doe </td>
<td aria-colindex="2" role="cell" class="">42</td>
<td aria-colindex="3" role="cell" class="">Male</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""> Jane Doe </td>
<td aria-colindex="2" role="cell" class="">36</td>
<td aria-colindex="3" role="cell" class="">Female</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""> Rubin Kincade </td>
<td aria-colindex="2" role="cell" class="">73</td>
<td aria-colindex="3" role="cell" class="">Male</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""> Shirley Partridge </td>
<td aria-colindex="2" role="cell" class="">62</td>
<td aria-colindex="3" role="cell" class="">Female</td>
</tr>
</tbody>
<tfoot role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class=""><span class="text-danger">Full Name</span></th>
<th role="columnheader" scope="col" aria-colindex="2" class=""><i>Age</i></th>
<th role="columnheader" scope="col" aria-colindex="3" class=""><i>Sex</i></th>
</tr>
</tfoot>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">foot-clone</span>&gt;</span>
      <span class="hljs-comment">&lt;!-- A custom formatted data column cell --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">name</span>)=<span class="hljs-string">"data"</span>&gt;</span>
        {{ data.value.first }} {{ data.value.last }}
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- A custom formatted header cell for field 'name' --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:head</span>(<span class="hljs-attr">name</span>)=<span class="hljs-string">"data"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-info"</span>&gt;</span>{{ data.label.toUpperCase() }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- A custom formatted footer cell for field 'name' --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:foot</span>(<span class="hljs-attr">name</span>)=<span class="hljs-string">"data"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>&gt;</span>{{ data.label }}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-comment">&lt;!-- Default fall-back custom formatted footer cell --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:foot</span>()=<span class="hljs-string">"data"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>{{ data.label }}<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">fields</span>: [
          <span class="hljs-comment">// A column that needs custom formatting</span>
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'name'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Full Name'</span> },
          <span class="hljs-comment">// A regular column</span>
          <span class="hljs-string">'age'</span>,
          <span class="hljs-comment">// A regular column</span>
          <span class="hljs-string">'sex'</span>
        ],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Doe'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Male'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">42</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Jane'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Doe'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Female'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">36</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Rubin'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Kincade'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Male'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">73</span> },
          { <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Shirley'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Partridge'</span> }, <span class="hljs-attr">sex</span>: <span class="hljs-string">'Female'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">62</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  插槽可以选择范围（上例中的<code translate="no" class="notranslate text-nowrap">数据</code>），并具有以下属性：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">column</code></td>
<td>String</td>
<td>字段的关键值</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">field</code></td>
<td>Object</td>
<td>字段的对象（来自字段属性）</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label</code></td>
<td>String</td>
<td>
  字段标签值（也可以作为<code translate="no" class="notranslate text-nowrap">data.field.label</code>使用）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">selectAllRows</code></td>
<td>Method</td>
<td>
  选择所有行（如果表处于<a href="#row-select-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">可选</code></a>模式，则适用
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">clearSelected</code></td>
<td>Method</td>
<td>
  取消选择所有行（如果表处于<a href="#row-select-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">可选</code></a>模式，则适用
</td>
</tr>
</tbody>
</table>
</div>
<p>
  在<code translate="no" class="notranslate text-nowrap">head(...)</code>和
  <code translate="no" class="notranslate text-nowrap">foot(...)</code>插槽内放置输入，按钮，选择或链接时，请注意，单击输入，选择，文本区域时，将不会发出单击事件（除非已禁用它们） 。 单击作用域内的插槽中的链接或按钮时，即使单击禁用，也不会发出用鼠标点击的标题
</p>
<p><strong>笔记:</strong></p>
<ul>
<li>
  在使用新的Vue 2.6 <code translate="no" class="notranslate text-nowrap">v-slot</code>语法时，
请注意，插槽名称<strong不能></strong>>包含空格，并且在使用浏览器内DOM模板时，插槽名称将始终小写。 为了解决这个问题，您可以使用Vue的<a href="https://vuejs.org/v2/guide/components-slots.html#Dynamic-Slot-Names" target="_blank" rel="noopener">dynamic slot names</a>传递插槽名称
  </li>
</ul>
<h3 id="adding-additional-rows-to-the-header" class="bv-no-focus-ring"><span class="bd-content-title">向标题添加其他行<a class="anchorjs-link" href="#adding-additional-rows-to-the-header" aria-labelledby="adding-additional-rows-to-the-header"></a></span></h3>
<p>
  如果您想在标题中添加其他行，可以通过<code translate="no" class="notranslate text-nowrap">thead-top</code>插槽进行。
该插槽插入标头单元格行之前，并且不会被<code translate="no" class="notranslate text-nowrap">&lt;tr&gt;..&lt;/tr&gt;</code>标记自动封装。
建议使用BootstrapVue<a href="#table-helper-components" class="font-weight-bold">表格帮助器</a>组件，而不要使用本机浏览器表子元素。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-thead-top-slot notranslate">
<div>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="7" class="table b-table" id="__BVID__1042">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th colspan="2" role="columnheader" scope="colspan" class=""><span class="sr-only">Name and ID</span></th>
<th role="columnheader" scope="col" class="table-secondary">Type 1</th>
<th colspan="3" role="columnheader" scope="colspan" class="table-primary">Type 2</th>
<th role="columnheader" scope="col" class="table-danger">Type 3</th>
</tr>
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Name</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">ID</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Type 1</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">Type 2A</th>
<th role="columnheader" scope="col" aria-colindex="5" class="">Type 2B</th>
<th role="columnheader" scope="col" aria-colindex="6" class="">Type 2C</th>
<th role="columnheader" scope="col" aria-colindex="7" class="">Type 3</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Stephen Hawking</td>
<td aria-colindex="2" role="cell" class="">1</td>
<td aria-colindex="3" role="cell" class="">false</td>
<td aria-colindex="4" role="cell" class="">true</td>
<td aria-colindex="5" role="cell" class="">false</td>
<td aria-colindex="6" role="cell" class="">false</td>
<td aria-colindex="7" role="cell" class="">false</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Johnny Appleseed</td>
<td aria-colindex="2" role="cell" class="">2</td>
<td aria-colindex="3" role="cell" class="">false</td>
<td aria-colindex="4" role="cell" class="">true</td>
<td aria-colindex="5" role="cell" class="">true</td>
<td aria-colindex="6" role="cell" class="">false</td>
<td aria-colindex="7" role="cell" class="">false</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">George Washington</td>
<td aria-colindex="2" role="cell" class="">3</td>
<td aria-colindex="3" role="cell" class="">false</td>
<td aria-colindex="4" role="cell" class="">false</td>
<td aria-colindex="5" role="cell" class="">false</td>
<td aria-colindex="6" role="cell" class="">false</td>
<td aria-colindex="7" role="cell" class="">true</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Albert Einstein</td>
<td aria-colindex="2" role="cell" class="">4</td>
<td aria-colindex="3" role="cell" class="">true</td>
<td aria-colindex="4" role="cell" class="">false</td>
<td aria-colindex="5" role="cell" class="">false</td>
<td aria-colindex="6" role="cell" class="">true</td>
<td aria-colindex="7" role="cell" class="">false</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Isaac Newton</td>
<td aria-colindex="2" role="cell" class="">5</td>
<td aria-colindex="3" role="cell" class="">true</td>
<td aria-colindex="4" role="cell" class="">true</td>
<td aria-colindex="5" role="cell" class="">false</td>
<td aria-colindex="6" role="cell" class="">true</td>
<td aria-colindex="7" role="cell" class="">false</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
      <span class="hljs-attr">responsive</span>=<span class="hljs-string">"sm"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:thead-top</span>=<span class="hljs-string">"data"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only"</span>&gt;</span>Name and ID<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"secondary"</span>&gt;</span>Type 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"3"</span>&gt;</span>Type 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>Type 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">name</span>: <span class="hljs-string">'Stephen Hawking'</span>, <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">type1</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2a</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">type2b</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2c</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type3</span>: <span class="hljs-literal">false</span> },
          { <span class="hljs-attr">name</span>: <span class="hljs-string">'Johnny Appleseed'</span>, <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">type1</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2a</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">type2b</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">type2c</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type3</span>: <span class="hljs-literal">false</span> },
          { <span class="hljs-attr">name</span>: <span class="hljs-string">'George Washington'</span>, <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">type1</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2a</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2b</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2c</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type3</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">name</span>: <span class="hljs-string">'Albert Einstein'</span>, <span class="hljs-attr">id</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">type1</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">type2a</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2b</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2c</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">type3</span>: <span class="hljs-literal">false</span> },
          { <span class="hljs-attr">name</span>: <span class="hljs-string">'Isaac Newton'</span>, <span class="hljs-attr">id</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">type1</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">type2a</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">type2b</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">type2c</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">type3</span>: <span class="hljs-literal">false</span> },
        ],
        <span class="hljs-attr">fields</span>: [
          <span class="hljs-string">'name'</span>,
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'id'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'ID'</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'type1'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Type 1'</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'type2a'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Type 2A'</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'type2b'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Type 2B'</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'type2c'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Type 2C'</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'type3'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Type 3'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  插槽<code translate="no" class="notranslate text-nowrap">thead-top</code>可以选择范围，接收具有以下属性的对象：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">columns</code></td>
<td>Number</td>
<td>呈现表中的列数</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">fields</code></td>
<td>Array</td>
<td>字段定义对象数组（标准化为对象数组格式）</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">selectAllRows</code></td>
<td>Method</td>
<td>
  选择所有行（如果表处于<a href="#row-select-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">selectable</code></a>模式，则适用
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">clearSelected</code></td>
<td>Method</td>
<td>
  取消选择所有行（如果表处于<a href="#row-select-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">selectable</code></a> 模式，则适用
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="creating-a-custom-footer" class="bv-no-focus-ring"><span class="bd-content-title">创建自定义页脚<a class="anchorjs-link" href="#creating-a-custom-footer" aria-labelledby="creating-a-custom-footer"></a></span></h3>
<p>
  如果需要对<code translate="no" class="notranslate text-nowrap">&lt;tfoot&gt;</code>的内容进行更大的布局控制，则可以使用可选范围的插槽
  <code translate="no" class="notranslate text-nowrap">custom-foot</code> 提供自己的行和单元格。 使用BootstrapVue的表助手子组件
  <code translate="no" class="notranslate text-nowrap">&lt;b-tr&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-th&gt;</code>,和
  <code translate="no" class="notranslate text-nowrap">&lt;b-td&gt;</code>生成自定义页脚布局。
</p>
<p>
  插槽<code translate="no" class="notranslate text-nowrap">custom-foot</code>可以选择范围，接收具有以下属性的对象：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">columns</code></td>
<td>Number</td>
<td>呈现表中的列数</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">fields</code></td>
<td>Array</td>
<td>字段定义对象数组（标准化为对象数组格式）</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">items</code></td>
<td>Array</td>
<td>当前显示的项记录的数组-过滤，排序和分页后</td>
</tr>
</tbody>
</table>
</div>
<p><strong>笔记:</strong></p>
<ul>
<li>
  如果设置了<code translate="no" class="notranslate text-nowrap">custom-foot</code>属性，则<strong>不会</strong>渲染<code translate="no" class="notranslate text-nowrap">foot-clone</code>。
</li>
<li>
  单击自定义英尺单元时，不会发出单击事件。
</li>
<li>当表格处于视觉堆叠模式时，自定义页脚将不会显示。</li>
</ul>
<h2 id="custom-empty-and-emptyfiltered-rendering-via-slots" class="bv-no-focus-ring"><span class="bd-content-title">通过插槽自定义空白和EmptyFiltered渲染<a class="anchorjs-link" href="#custom-empty-and-emptyfiltered-rendering-via-slots" aria-labelledby="custom-empty-and-emptyfiltered-rendering-via-slots"></a></span></h2>
<p>
  除了使用<code translate="no" class="notranslate text-nowrap">empty-text</code>, 
  <code translate="no" class="notranslate text-nowrap">empty-filtered-text</code>, 
  <code translate="no" class="notranslate text-nowrap">empty-html</code>,和
  <code translate="no" class="notranslate text-nowrap">empty-filtered-html</code>外，还可以为没有数据的表提供自定义呈现，而表中没有要使用命名槽显示的数据。
</p>
<p>
  为了显示这些插槽，必须设置<code translate="no" class="notranslate text-nowrap">show-empty</code>属性，并且项必须为falsy或长度为0的数组。
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">show-empty</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:empty</span>=<span class="hljs-string">"scope"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>{{ scope.emptyText }}<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:emptyfiltered</span>=<span class="hljs-string">"scope"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>{{ scope.emptyFilteredText }}<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  插槽可以选择范围。 插槽的范围（上例中的作用域）将具有以下属性：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">emptyHtml</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">empty-html</code>属性</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">emptyText</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">empty-text</code>属性</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">emptyFilteredHtml</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">empty-filtered-html</code>属性</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">emptyFilteredText</code></td>
<td>String</td>
<td><code translate="no" class="notranslate text-nowrap">empty-filtered-text</code>属性</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">fields</code></td>
<td>Array</td>
<td><code translate="no" class="notranslate text-nowrap">fields</code>属性</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">items</code></td>
<td>Array</td>
<td><code translate="no" class="notranslate text-nowrap">items</code>属性，Exposed here to check null vs []</td>
</tr>
</tbody>
</table>
</div>
<h2 id="advanced-features" class="bv-no-focus-ring"><span class="bd-content-title">高级功能<a class="anchorjs-link" href="#advanced-features" aria-labelledby="advanced-features"></a></span></h2>
<h3 id="sticky-headers" class="bv-no-focus-ring"><span class="bd-content-title">粘页眉<a class="anchorjs-link" href="#sticky-headers" aria-labelledby="sticky-headers"></a></span></h3>
<p>
  
  使用<code translate="no" class="notranslate text-nowrap">sticky-header</code>属性启用垂直滚动表，并在表主体滚动时保持标题不变（粘滞）。
将prop设置为<code translate="no" class="notranslate text-nowrap">true</code>（或没有显式值）将生成一个最大高度为<code translate="no" class="notranslate text-nowrap">300px</code>的表。
要指定<code translate="no" class="notranslate text-nowrap">300px</code>以外的最大高度，请将<code translate="no" class="notranslate text-nowrap">sticky-header</code>
属性设置为有效的CSS高度（包括单位），即<code translate="no" class="notranslate text-nowrap">sticky-header="200px"</code>。
如果表大于可用的水平空间，则启用粘性页眉的表也将自动始终保持水平响应，而不管<a href="#responsive-tables" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">responsive</code></a>属性设置如何。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-sticky-header notranslate">
<div>
<div class="b-table-sticky-header">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table" id="__BVID__1064">
<thead role="rowgroup" class="thead-light">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Heading1</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Heading2</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Heading3</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">table cell</td>
<td aria-colindex="2" role="cell" class="">table cell</td>
<td aria-colindex="3" role="cell" class="">table cell</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">sticky-header</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">head-variant</span>=<span class="hljs-string">"light"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> },
          { <span class="hljs-attr">heading1</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading2</span>: <span class="hljs-string">'table cell'</span>, <span class="hljs-attr">heading3</span>: <span class="hljs-string">'table cell'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>粘性标头说明：</strong></p>
<ul>
<li>
  如果桌子上有<a href="#stacked-tables" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">stacked</code></a>的属性，那么<code translate="no" class="notranslate text-nowrap">sticky-header</code>属性将不起作用。
</li>
<li>
  粘性标头表包装在垂直滚动的<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>中，并设置了最大高度。
</li>
<li>
  需要BootstrapVue的自定义CSS才能支持<code translate="no" class="notranslate text-nowrap">sticky-header</code>。
</li>
<li>
  Bootstrap v4使用CSS样式<code translate="no" class="notranslate text-nowrap">border-collapse: collapsed</code>：
  在表格元素上折叠。 这样可以防止粘性标头上的边框“粘在”标头上，因此，当正文滚动时，边框也会滚动。 要解决此问题，请在表格上设置属性<code translate="no" class="notranslate text-nowrap">no-border-collapse</code>
  （注意，使用带边框等功能时，这可能会导致边框宽度加倍）。
</li>
<li>
  粘性标头功能使用CSS样式位置：<code translate="no" class="notranslate text-nowrap">position: sticky</code>。
  Internet Explorer不支持位置：<code translate="no" class="notranslate text-nowrap">position: sticky</code>，因此对于IE 11，表标题将与表主体一起滚动。
</li>
</ul>
<h3 id="sticky-columns" class="bv-no-focus-ring"><span class="bd-content-title">粘性列<a class="anchorjs-link" href="#sticky-columns" aria-labelledby="sticky-columns"></a></span></h3>
<p>
  可以将列设置为粘性列，当表格具有水平滚动条时，列会停留在表格的左侧。 要将列设为<code translate="no" class="notranslate text-nowrap">stickyColumn</code>，
请在<a href="#field-definition-reference" class="font-weight-bold">字段的标题定义</a>中设置<code translate="no" class="notranslate text-nowrap">stickyColumn</code>属性。 
粘性列仅在表格具有<code translate="no" class="notranslate text-nowrap">sticky-header</code>属性设置和/或已设置<a href="#responsive-tables" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">响应</code></a>属性时才起作用。
</p>
<p><strong>示例：粘性列和标题</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-table-sticky-columns notranslate">
<div>
<div class="mb-2">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__1084">
<label class="custom-control-label" for="__BVID__1084">Sticky header</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__1085">
<label class="custom-control-label" for="__BVID__1085">No border collapse</label>
</div>
</div>
<div class="b-table-sticky-header table-responsive">
<table role="table" aria-busy="false" aria-colcount="13" class="table b-table" id="__BVID__1086">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="table-primary b-table-sticky-column"><div class="text-nowrap">Row ID</div></th>
<th role="columnheader" scope="col" aria-colindex="2" class="table-b-table-default"><div class="text-nowrap"> Heading A </div></th>
<th role="columnheader" scope="col" aria-colindex="3" class="table-b-table-default"><div class="text-nowrap"> Heading B </div></th>
<th role="columnheader" scope="col" aria-colindex="4" class="table-info b-table-sticky-column"><div class="text-nowrap"> Heading C </div></th>
<th role="columnheader" scope="col" aria-colindex="5" class="table-b-table-default"><div class="text-nowrap"> Heading D </div></th>
<th role="columnheader" scope="col" aria-colindex="6" class="table-b-table-default"><div class="text-nowrap"> Heading E </div></th>
<th role="columnheader" scope="col" aria-colindex="7" class="table-b-table-default"><div class="text-nowrap"> Heading F </div></th>
<th role="columnheader" scope="col" aria-colindex="8" class="table-b-table-default"><div class="text-nowrap"> Heading G </div></th>
<th role="columnheader" scope="col" aria-colindex="9" class="table-b-table-default"><div class="text-nowrap"> Heading H </div></th>
<th role="columnheader" scope="col" aria-colindex="10" class="table-b-table-default"><div class="text-nowrap"> Heading I </div></th>
<th role="columnheader" scope="col" aria-colindex="11" class="table-b-table-default"><div class="text-nowrap"> Heading J </div></th>
<th role="columnheader" scope="col" aria-colindex="12" class="table-b-table-default"><div class="text-nowrap"> Heading K </div></th>
<th role="columnheader" scope="col" aria-colindex="13" class="table-b-table-default"><div class="text-nowrap"> Heading L </div></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">1</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">2</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">3</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">4</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">5</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">6</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">7</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">8</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">9</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" aria-colindex="1" class="table-primary b-table-sticky-column">10</th>
<td aria-colindex="2" role="cell" class="">0</td>
<td aria-colindex="3" role="cell" class="">1</td>
<td role="cell" aria-colindex="4" class="table-info b-table-sticky-column">2</td>
<td aria-colindex="5" role="cell" class="">3</td>
<td aria-colindex="6" role="cell" class="">4</td>
<td aria-colindex="7" role="cell" class="">5</td>
<td aria-colindex="8" role="cell" class="">6</td>
<td aria-colindex="9" role="cell" class="">7</td>
<td aria-colindex="10" role="cell" class="">8</td>
<td aria-colindex="11" role="cell" class="">9</td>
<td aria-colindex="12" role="cell" class="">10</td>
<td aria-colindex="13" role="cell" class="">11</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"stickyHeader"</span> <span class="hljs-attr">inline</span>&gt;</span>Sticky header<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"noCollapse"</span> <span class="hljs-attr">inline</span>&gt;</span>No border collapse<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">:sticky-header</span>=<span class="hljs-string">"stickyHeader"</span>
      <span class="hljs-attr">:no-border-collapse</span>=<span class="hljs-string">"noCollapse"</span>
      <span class="hljs-attr">responsive</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
    &gt;</span>
      <span class="hljs-comment">&lt;!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:head</span>(<span class="hljs-attr">id</span>)=<span class="hljs-string">"scope"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-nowrap"</span>&gt;</span>Row ID<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:head</span>()=<span class="hljs-string">"scope"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-nowrap"</span>&gt;</span>
          Heading {{ scope.label }}
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">stickyHeader</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">noCollapse</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">fields</span>: [
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'id'</span>, <span class="hljs-attr">stickyColumn</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">isRowHeader</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">variant</span>: <span class="hljs-string">'primary'</span> },
          <span class="hljs-string">'a'</span>,
          <span class="hljs-string">'b'</span>,
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'c'</span>, <span class="hljs-attr">stickyColumn</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">variant</span>: <span class="hljs-string">'info'</span> },
          <span class="hljs-string">'d'</span>,
          <span class="hljs-string">'e'</span>,
          <span class="hljs-string">'f'</span>,
          <span class="hljs-string">'g'</span>,
          <span class="hljs-string">'h'</span>,
          <span class="hljs-string">'i'</span>,
          <span class="hljs-string">'j'</span>,
          <span class="hljs-string">'k'</span>,
          <span class="hljs-string">'l'</span>
        ],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> },
          { <span class="hljs-attr">id</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">a</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">d</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">e</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">f</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">g</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">i</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">j</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">k</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">l</span>: <span class="hljs-number">11</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>粘性列注释：</strong></p>
<ul>
<li>
  如果表格具有<a href="#stacked-tables" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">堆积</code></a>的属性集，则粘性列无效。
</li>
<li>
  粘性列表需要<code translate="no" class="notranslate text-nowrap">sticky-header</code> 和/或 
  <code translate="no" class="notranslate text-nowrap">responsive</code>模式，并包装在可水平滚动的<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>中。
</li>
<li>
  当您将多个列设置为<code translate="no" class="notranslate text-nowrap">stickyColumn</code>时，这些列将在视觉上相互堆叠，并且最左边的粘性列可能会从下一个粘性列下方“窥视”。 要解决此问题，请确保后面的stickyColumns与以前的sticky列具有相同的宽度或宽度。
</li>
<li>
  Bootstrap v4使用CSS样式<code translate="no" class="notranslate text-nowrap">border-collapse: collapsed</code>在表格元素上折叠。
  这样可以防止粘滞列上的任何边界“粘连”到列上，因此，当正文滚动时，这些边界也将滚动。 要解决此问题，请在表格上设置属性
  <code translate="no" class="notranslate text-nowrap">no-border-collapse</code>（注意，使用带边框等功能时，这可能会导致边框宽度加倍）。
</li>
<li>为了支持粘性列，需要BootstrapVue的自定义CSS。</li>
<li>
  粘性列功能使用CSS样式<code translate="no" class="notranslate text-nowrap">position: sticky</code>以定位列单元格。
  Internet Explorer不支持<code translate="no" class="notranslate text-nowrap">position: sticky</code>，因此对于IE 11，粘性列将随表格主体滚动。
</li>
</ul>
<h3 id="row-details-support" class="bv-no-focus-ring"><span class="bd-content-title">行详细信息支持<a class="anchorjs-link" href="#row-details-support" aria-labelledby="row-details-support"></a></span></h3>
<p>
  如果您可以选择显示其他记录信息（例如，在字段定义数组中未指定的列），则可以将作用域内的<code translate="no" class="notranslate text-nowrap">row-details</code>与
特殊项目记录布尔属性<code translate="no" class="notranslate text-nowrap">_showDetails</code>结合使用。
</p>
<p>
  如果记录的<code translate="no" class="notranslate text-nowrap">_showDetails</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>，
并且存在<code translate="no" class="notranslate text-nowrap">row-details</code>的槽，则将在该项目的正下方显示新行，并显示<code translate="no" class="notranslate text-nowrap">row-details</code>的槽的内容。
</p>
<p>
  在作用域字段插槽中，您可以通过调用传递到该字段作用域插槽变量的<code translate="no" class="notranslate text-nowrap">toggleDetails</code>函数，
  来切换行的<code translate="no" class="notranslate text-nowrap">row-details</code>
  作用域插槽的可见性。 您可以使用作用域字段插槽变量<code translate="no" class="notranslate text-nowrap">detailsShowing</code>确定<code translate="no" class="notranslate text-nowrap">row-details</code>插槽的可见性。
</p>
<p><strong>注意:</strong> 
  如果直接在项目数据上操作<code translate="no" class="notranslate text-nowrap">_showDetails</code>属性
（即不通过<code translate="no" class="notranslate text-nowrap">toggleDetails</code>函数引用），
则<code translate="no" class="notranslate text-nowrap">_showDetails</code>必须正确存在于项目数据中，以便正确地检测其值的更改。 阅读有关<a href="https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats" target="_blank" rel="noopener">Vue的反应性限制</a>的更多信息。
</p>
<p><strong>可用的 <code translate="no" class="notranslate text-nowrap">行详细信息</code>范围的变量属性:</strong>
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">item</code></td>
<td>Object</td>
<td>整行记录数据对象</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">index</code></td>
<td>Number</td>
<td>当前可见行号</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">fields</code></td>
<td>Array</td>
<td>标准化字段定义数组（以对象数组格式）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">toggleDetails</code></td>
<td>Function</td>
<td>切换行的详细信息栏可见性的功能</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">rowSelected</code></td>
<td>Boolean</td>
<td>
  如果已选择该行，则为<code translate="no" class="notranslate text-nowrap">true</code>。 有关其他信息，
  请参见<a href="#row-select-support" class="font-weight-bold">Row select support</a>部分。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">selectRow</code></td>
<td>Function</td>
<td>调用时，选择当前行。 有关其他信息，请参见<a href="#row-select-support" class="font-weight-bold">Row select support</a>部分。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">unselectRow</code></td>
<td>Function</td>
<td>调用时，取消选择当前行。 有关其他信息，请参见<a href="#row-select-support" class="font-weight-bold">Row select support</a>部分。</td>
</tr>
</tbody>
</table>
</div>
<p>
  注意：与行选择相关的范围属性仅在<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>中可用。
</p>
<p>在下面的示例中，我们显示了两种切换细节可见性的方法：一种通过按钮，另一种通过复选框。 我们还有第三行详细信息，默认情况下最初会显示详细信息。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-details notranslate">
<div>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table table-striped" id="__BVID__1134">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">First Name</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Last Name</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Show Details</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Dickerson</td>
<td aria-colindex="2" role="cell" class="">Macdonald</td>
<td aria-colindex="3" role="cell" class=""><button type="button" class="btn mr-2 btn-secondary btn-sm"> Show Details </button>
<div class="custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__1142">
<label class="custom-control-label" for="__BVID__1142"> Details via check </label>
</div></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Larsen</td>
<td aria-colindex="2" role="cell" class="">Shaw</td>
<td aria-colindex="3" role="cell" class=""><button type="button" class="btn mr-2 btn-secondary btn-sm"> Show Details </button>
<div class="custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__1144">
<label class="custom-control-label" for="__BVID__1144"> Details via check </label>
</div></td>
</tr>
<tr role="row" class="b-table-has-details" aria-details="__BVID__1134__details_2_" aria-owns="__BVID__1134__details_2_">
<td aria-colindex="1" role="cell" class="">Geneva</td>
<td aria-colindex="2" role="cell" class="">Wilson</td>
<td aria-colindex="3" role="cell" class=""><button type="button" class="btn mr-2 btn-secondary btn-sm"> Hide Details </button>
<div class="custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__1146">
<label class="custom-control-label" for="__BVID__1146"> Details via check </label>
</div></td>
</tr>
<tr aria-hidden="true" role="presentation" class="d-none"></tr>
<tr role="row" tabindex="-1" class="b-table-details" id="__BVID__1134__details_2_">
<td colspan="3" role="cell" class=""><div class="card">
<div class="card-body">
<div class="row mb-2">
<div class="text-sm-right col-sm-3"><b>Age:</b></div>
<div class="col">89</div>
</div>
<div class="row mb-2">
<div class="text-sm-right col-sm-3"><b>Is Active:</b></div>
<div class="col">false</div>
</div>
<button type="button" class="btn btn-secondary btn-sm">Hide Details</button>
</div>
</div></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Jami</td>
<td aria-colindex="2" role="cell" class="">Carney</td>
<td aria-colindex="3" role="cell" class=""><button type="button" class="btn mr-2 btn-secondary btn-sm"> Show Details </button>
<div class="custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__1150">
<label class="custom-control-label" for="__BVID__1150"> Details via check </label>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span> <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span> <span class="hljs-attr">striped</span> <span class="hljs-attr">responsive</span>=<span class="hljs-string">"sm"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">show_details</span>)=<span class="hljs-string">"row"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"row.toggleDetails"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-2"</span>&gt;</span>
          {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"row.detailsShowing"</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"row.toggleDetails"</span>&gt;</span>
          Details via check
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:row-details</span>=<span class="hljs-string">"row"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-sm-right"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>Age:<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>{{ row.item.age }}<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

          <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-sm-right"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>Is Active:<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>{{ row.item.isActive }}<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

          <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"row.toggleDetails"</span>&gt;</span>Hide Details<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">fields</span>: [<span class="hljs-string">'first_name'</span>, <span class="hljs-string">'last_name'</span>, <span class="hljs-string">'show_details'</span>],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          {
            <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>,
            <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>,
            <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span>,
            <span class="hljs-attr">_showDetails</span>: <span class="hljs-literal">true</span>
          },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Carney'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="row-select-support" class="bv-no-focus-ring"><span class="bd-content-title">行选择支持<a class="anchorjs-link" href="#row-select-support" aria-labelledby="row-select-support"></a></span></h3>
<p>

  您可以通过使用<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>属性来<code translate="no" class="notranslate text-nowrap">selectable</code>行。
</p>
<p>
  用户可以通过设置<code translate="no" class="notranslate text-nowrap">select-mode</code>属性轻松地更改选择模式。
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">'multi'</code>: 每次单击都会选择/取消选择该行（默认模式）</li>
<li><code translate="no" class="notranslate text-nowrap">'single'</code>: 一次只能选择一行</li>
<li><code translate="no" class="notranslate text-nowrap">'range'</code>: 选择任何单击的行，取消选择任何其他行。 <kbd class="notranslate" translate="no">SHIFT</kbd> + 单击选择行范围，然后,
  和<kbd class="notranslate" translate="no">CTRL</kbd> (或 <kbd class="notranslate" translate="no">CMD</kbd>) +单击将切换选定的行。</li>
</ul>
<p>
  当一个表格是<code translate="no" class="notranslate text-nowrap">selectable</code>的并且用户单击一行时，<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>
  将发出<code translate="no" class="notranslate text-nowrap">row-selected</code>的事件，并传递单个参数，该参数是所选项目的完整列表。<strong>将此参数视为只读。</strong>
</p>
<p>
  还可以通过<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>实例上的以下公开方法以编程方式选择和取消选择行（即通过<code translate="no" class="notranslate text-nowrap">this.$refs</code>对表实例的引用）：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">selectRow(index)</code></td>
<td>
  选择具有给定<code translate="no" class="notranslate text-nowrap">索引</code>号的行。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">unselectRow(index)</code></td>
<td>取消选择具有给定<code translate="no" class="notranslate text-nowrap">索引</code>号的行。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">selectAllRows()</code></td>
<td>
  选择表中的所有行，但在<code translate="no" class="notranslate text-nowrap">单</code>模式下除外，在这种情况下，仅选择第一行。
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">clearSelected()</code></td>
<td>取消选择所有行。</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">isRowSelected(index)</code></td>
<td>
  如果选择了具有给定 <code translate="no" class="notranslate text-nowrap">索引</code>的行，则返回<code translate="no" class="notranslate text-nowrap">true</code>；
  否则返回<code translate="no" class="notranslate text-nowrap">false</code>。
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>程序行选择注意事项：</strong></p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">index</code>是在应用了过滤，排序和分页之后，表的<strong>可见行 </strong>从零开始的索引。
</li>
<li>
  在<code translate="no" class="notranslate text-nowrap">单</code>模式下，<code translate="no" class="notranslate text-nowrap">selectRow(index)</code>将取消选择任何先前选择的行。
</li>
<li>
  尝试在不存在的行上选择<code translate="no" class="notranslate text-nowrap">selectRow(index)</code>或<code translate="no" class="notranslate text-nowrap">unselectRow(index)</code>将被忽略。
</li>
<li>
  该表必须<code translate="no" class="notranslate text-nowrap">可选中</code>所有这些方法才能生效。
</li>
<li>
  您可以通过设置<code translate="no" class="notranslate text-nowrap">no-select-on-click</code> 属性来通过点击事件禁用行选择。 然后只能通过编程选择行。
</li>
</ul>
<p><strong>行选择注释：</strong></p>
<ul>
<li>
  对表进行<a href="#sorting" class="font-weight-bold">Sorting</a>, <a href="#filtering" class="font-weight-bold">filtering</a>, 或 <a href="#pagination" class="font-weight-bold">paginating</a>
  将<strong>清除活动的选择</strong>。 如果需要，将以空数组（<code translate="no" class="notranslate text-nowrap">[]</code>）发出<code translate="no" class="notranslate text-nowrap">行选择</code>的事件。
  </li>
<li>
  当表处于 <code translate="no" class="notranslate text-nowrap">可选</code>模式时，
  出于<a href="#accessibility" class="font-weight-bold">可访问</a>的原因，所有数据项<code translate="no" class="notranslate text-nowrap">&lt;tr&gt;</code>元素都将位于文档选项卡序列中（<code translate="no" class="notranslate text-nowrap">tabindex="0"</code>），
  并且将 <code translate="no" class="notranslate text-nowrap">aria-selected</code>属性设置为
  <code translate="no" class="notranslate text-nowrap">'true'</code>或<code translate="no" class="notranslate text-nowrap">'false'</code>取决于行的选定状态。
</li>
<li>
  当一个表是<code translate="no" class="notranslate text-nowrap">可选</code>的时，
  该表将把<code translate="no" class="notranslate text-nowrap">aria-multiselect</code> 属性设置为<code translate="no" class="notranslate text-nowrap">'false'</code>
  （对于<code translate="no" class="notranslate text-nowrap">'单'</code>模式）和<code translate="no" class="notranslate text-nowrap">'true'</code>
  （对于<code translate="no" class="notranslate text-nowrap">多</code>模式或<code translate="no" class="notranslate text-nowrap">范围</code>模式）。
</li>
</ul>
<p>
  当<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>是可选的时，它将在<code translate="no" class="notranslate text-nowrap">&lt;table&gt;</code>元素上
 具有<code translate="no" class="notranslate text-nowrap">b-table-selectable</code>和以下三个类之一（取决于所使用的模式）：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">b-table-select-single</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-table-select-multi</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-table-select-range</code></li>
</ul>
<p>
  当选择至少一行时，<code translate="no" class="notranslate text-nowrap">b-table-selecting</code>类
  将在<code translate="no" class="notranslate text-nowrap">&lt;table&gt;</code>元素上处于活动状态。 
  选定行的行将对 <code translate="no" class="notranslate text-nowrap">&lt;tr&gt;</code>元素应用一类<code translate="no" class="notranslate text-nowrap">b-table-row-selected</code>。
</p>
<p>
  使用属性<code translate="no" class="notranslate text-nowrap">selected-variant</code>将Bootstrap主题颜色应用于选定的行。
  注意，由于表变量在Bootstrap的CSS中定义的顺序，因此任何行变量都可能优先于<code translate="no" class="notranslate text-nowrap">选择变量</code>。 如果您将使用其他方式来表示已选择行（例如，下例中的作用域字段槽），则可以将<code translate="no" class="notranslate text-nowrap">selected-variant</code>设置为空字符串。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">selected-variant</code>可以是任何<a href="../../../bootstrap-vue/docs/reference/color-variants" class="font-weight-bold">标准（或自定义）引导程序基本颜色变体</a>，
  也可以是优先于任何特定行或单元格变量的特殊<a href="../../../bootstrap-vue/docs/reference/color-variants#table-variants" class="font-weight-bold">表 <code translate="no" class="notranslate text-nowrap">active</code> 变量</a>（默认值）。
</p>
<p>出于可访问性的原因（特别是对于色盲用户或有色差问题的用户），强烈建议始终提供其他视觉方式来传达已选择行的信息，例如下面示例中显示的虚拟列。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-selectable notranslate">
<div>
<fieldset class="form-group" id="__BVID__1152" aria-labelledby="__BVID__1152__BV_label_">
<div class="form-row">
<legend tabindex="-1" class="col-md-4 bv-no-focus-ring col-form-label" id="__BVID__1152__BV_label_">Selection mode:</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring col">
<select class="mb-3 custom-select" id="__BVID__1153">
<option value="multi">multi</option>
<option value="single">single</option>
<option value="range">range</option>
</select>
</div>
</div>
</fieldset>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="5" aria-multiselectable="true" class="table b-table b-table-selectable b-table-select-multi" id="__BVID__1154">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Selected</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Is Active</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Age</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">First Name</th>
<th role="columnheader" scope="col" aria-colindex="5" class="">Last Name</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" tabindex="0" aria-selected="false" class="">
<td aria-colindex="1" role="cell" class=""><span aria-hidden="true">&nbsp;</span> <span class="sr-only">Not selected</span></td>
<td aria-colindex="2" role="cell" class="">true</td>
<td aria-colindex="3" role="cell" class="">40</td>
<td aria-colindex="4" role="cell" class="">Dickerson</td>
<td aria-colindex="5" role="cell" class="">Macdonald</td>
</tr>
<tr role="row" tabindex="0" aria-selected="false" class="">
<td aria-colindex="1" role="cell" class=""><span aria-hidden="true">&nbsp;</span> <span class="sr-only">Not selected</span></td>
<td aria-colindex="2" role="cell" class="">false</td>
<td aria-colindex="3" role="cell" class="">21</td>
<td aria-colindex="4" role="cell" class="">Larsen</td>
<td aria-colindex="5" role="cell" class="">Shaw</td>
</tr>
<tr role="row" tabindex="0" aria-selected="false" class="">
<td aria-colindex="1" role="cell" class=""><span aria-hidden="true">&nbsp;</span> <span class="sr-only">Not selected</span></td>
<td aria-colindex="2" role="cell" class="">false</td>
<td aria-colindex="3" role="cell" class="">89</td>
<td aria-colindex="4" role="cell" class="">Geneva</td>
<td aria-colindex="5" role="cell" class="">Wilson</td>
</tr>
<tr role="row" tabindex="0" aria-selected="false" class="">
<td aria-colindex="1" role="cell" class=""><span aria-hidden="true">&nbsp;</span> <span class="sr-only">Not selected</span></td>
<td aria-colindex="2" role="cell" class="">true</td>
<td aria-colindex="3" role="cell" class="">38</td>
<td aria-colindex="4" role="cell" class="">Jami</td>
<td aria-colindex="5" role="cell" class="">Carney</td>
</tr>
</tbody>
</table>
</div>
<p>
<button type="button" class="btn btn-secondary btn-sm">Select all</button>
<button type="button" class="btn btn-secondary btn-sm">Clear selected</button>
<button type="button" class="btn btn-secondary btn-sm">Select 3rd row</button>
<button type="button" class="btn btn-secondary btn-sm">Unselect 3rd row</button>
</p>
<p> Selected Rows:<br>
[] </p>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Selection mode:"</span> <span class="hljs-attr">label-cols-md</span>=<span class="hljs-string">"4"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selectMode"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"modes"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">ref</span>=<span class="hljs-string">"selectableTable"</span>
      <span class="hljs-attr">selectable</span>
      <span class="hljs-attr">:select-mode</span>=<span class="hljs-string">"selectMode"</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
      @<span class="hljs-attr">row-selected</span>=<span class="hljs-string">"onRowSelected"</span>
      <span class="hljs-attr">responsive</span>=<span class="hljs-string">"sm"</span>
    &gt;</span>
      <span class="hljs-comment">&lt;!-- Example scoped slot for select state illustrative purposes --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">selected</span>)=<span class="hljs-string">"{ rowSelected }"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"rowSelected"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-symbol">&amp;check;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only"</span>&gt;</span>Selected<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-else</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-symbol">&amp;nbsp;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only"</span>&gt;</span>Not selected<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"selectAllRows"</span>&gt;</span>Select all<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"clearSelected"</span>&gt;</span>Clear selected<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"selectThirdRow"</span>&gt;</span>Select 3rd row<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"unselectThirdRow"</span>&gt;</span>Unselect 3rd row<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
      Selected Rows:<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
      {{ selected }}
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">modes</span>: [<span class="hljs-string">'multi'</span>, <span class="hljs-string">'single'</span>, <span class="hljs-string">'range'</span>],
        <span class="hljs-attr">fields</span>: [<span class="hljs-string">'selected'</span>, <span class="hljs-string">'isActive'</span>, <span class="hljs-string">'age'</span>, <span class="hljs-string">'first_name'</span>, <span class="hljs-string">'last_name'</span>],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Carney'</span> }
        ],
        <span class="hljs-attr">selectMode</span>: <span class="hljs-string">'multi'</span>,
        <span class="hljs-attr">selected</span>: []
      }
    },
    <span class="hljs-attr">methods</span>: {
      onRowSelected(items) {
        <span class="hljs-keyword">this</span>.selected = items
      },
      selectAllRows() {
        <span class="hljs-keyword">this</span>.$refs.selectableTable.selectAllRows()
      },
      clearSelected() {
        <span class="hljs-keyword">this</span>.$refs.selectableTable.clearSelected()
      },
      selectThirdRow() {
        <span class="hljs-comment">// Rows are indexed from 0, so the third row is index 2</span>
        <span class="hljs-keyword">this</span>.$refs.selectableTable.selectRow(<span class="hljs-number">2</span>)
      },
      unselectThirdRow() {
        <span class="hljs-comment">// Rows are indexed from 0, so the third row is index 2</span>
        <span class="hljs-keyword">this</span>.$refs.selectableTable.unselectRow(<span class="hljs-number">2</span>)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="table-body-transition-support" class="bv-no-focus-ring"><span class="bd-content-title">表格内容过渡支持<a class="anchorjs-link" href="#table-body-transition-support" aria-labelledby="table-body-transition-support"></a></span></h3>
<p>
  可以通过内部使用Vue的<code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code>组件在<tbody>元素上支持Vue<code translate="no" class="notranslate text-nowrap">&lt;transition-group&gt;</code>。 提供了三个支持过渡的道具（所有三个道具默认为undefined）：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tbody-transition-props</code></td>
<td>Object</td>
<td>过渡组属性的对象
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">tbody-transition-handlers</code></td>
<td>Object</td>
<td>过渡组事件处理程序的对象</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">primary-key</code></td>
<td>String</td>
<td>字符串，指定要用作唯一行键的字段（必填）</td>
</tr>
</tbody>
</table>
</div>
<p>
  要启用转换，您需要指定<code translate="no" class="notranslate text-nowrap">tbody-transition-props</code> 和/或 <code translate="no" class="notranslate text-nowrap">tbody-transition-handlers</code>，
  并且必须通过<code translate="no" class="notranslate text-nowrap">主键</code>属性指定要用作唯一键的字段键。 
  您的数据必须具有一列（通过将<code translate="no" class="notranslate text-nowrap">主键</code>属性设置为字段名称来指定），
  该列每行必须具有唯一值，以使转换正常工作。 主键字段的值可以是唯一的字符串或数字。 指定的字段不需要出现在呈现的表输出中，但是必须存在于item数据的每一行中。
</p>
<p>您还必须提供CSS来处理项目中的过渡（如果使用CSS过渡）。</p>
<p>
  有关Vue的列表呈现过渡的更多信息，请参见 <a href="https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions" target="_blank" rel="noopener">Vue JS 官方文档</a>。
</p>
<p>在下面的示例中，我们使用了以下自定义CSS：</p>
<figure class="highlight"><pre class="hljs css text-monospace p-2 notranslate" translate="no"><span class="hljs-selector-tag">table</span><span class="hljs-selector-id">#table-transition-example</span> <span class="hljs-selector-class">.flip-list-move</span> {
  <span class="hljs-attribute">transition</span>: transform <span class="hljs-number">1s</span>;
}</pre></figure>
<div translate="translate" class="bd-example vue-example vue-example-b-table-transitions notranslate">
<div>
<table id="table-transition-example" role="table" aria-busy="false" aria-colcount="3" class="table b-table table-striped table-sm">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="">A<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" aria-sort="none" class="">B<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" aria-sort="none" class="">C<span class="sr-only"> (Click to sort Ascending)</span></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" id="table-transition-example__row_2" data-pk="2" class="">
<td aria-colindex="1" role="cell" class="">2</td>
<td aria-colindex="2" role="cell" class="">Two</td>
<td aria-colindex="3" role="cell" class="">Moose</td>
</tr>
<tr role="row" id="table-transition-example__row_1" data-pk="1" class="">
<td aria-colindex="1" role="cell" class="">1</td>
<td aria-colindex="2" role="cell" class="">Three</td>
<td aria-colindex="3" role="cell" class="">Dog</td>
</tr>
<tr role="row" id="table-transition-example__row_3" data-pk="3" class="">
<td aria-colindex="1" role="cell" class="">3</td>
<td aria-colindex="2" role="cell" class="">Four</td>
<td aria-colindex="3" role="cell" class="">Cat</td>
</tr>
<tr role="row" id="table-transition-example__row_4" data-pk="4" class="">
<td aria-colindex="1" role="cell" class="">4</td>
<td aria-colindex="2" role="cell" class="">One</td>
<td aria-colindex="3" role="cell" class="">Mouse</td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"table-transition-example"</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
      <span class="hljs-attr">striped</span>

      <span class="hljs-attr">small</span>
      <span class="hljs-attr">primary-key</span>=<span class="hljs-string">"a"</span>
      <span class="hljs-attr">:tbody-transition-props</span>=<span class="hljs-string">"transProps"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">transProps</span>: {
          <span class="hljs-comment">// Transition name</span>
          <span class="hljs-attr">name</span>: <span class="hljs-string">'flip-list'</span>
        },
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">a</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">b</span>: <span class="hljs-string">'Two'</span>, <span class="hljs-attr">c</span>: <span class="hljs-string">'Moose'</span> },
          { <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-string">'Three'</span>, <span class="hljs-attr">c</span>: <span class="hljs-string">'Dog'</span> },
          { <span class="hljs-attr">a</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">b</span>: <span class="hljs-string">'Four'</span>, <span class="hljs-attr">c</span>: <span class="hljs-string">'Cat'</span> },
          { <span class="hljs-attr">a</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">b</span>: <span class="hljs-string">'One'</span>, <span class="hljs-attr">c</span>: <span class="hljs-string">'Mouse'</span> }
        ],
        <span class="hljs-attr">fields</span>: [
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'a'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'c'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="v-model-binding" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">v-model</code> 捆绑<a class="anchorjs-link" href="#v-model-binding" aria-labelledby="v-model-binding"></a></span></h3>
<p>
  如果将变量绑定到<code translate="no" class="notranslate text-nowrap">v-model</code>属性，
  则此变量的内容将是当前显示的项目记录（从零开始的索引，<code translate="no" class="notranslate text-nowrap">最大也页面大小</code>-1）。 通常应将此变量（<code translate="no" class="notranslate text-nowrap">值</code>属性）视为只读。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">v-model</code>中的记录是项的过滤/分页浅表副本，
  因此，对<code translate="no" class="notranslate text-nowrap">v-model</code>中记录属性的任何更改都将反映在原始项数组中（将项设置为提供程序功能时除外）。
  从<code translate="no" class="notranslate text-nowrap">v-model</code>数组中删除记录不会从原始项目数组中删除记录，也不会从显示的行中删除记录。
</p>
<p><strong>注意:</strong> 
  请勿将任何值直接绑定到<code translate="no" class="notranslate text-nowrap">值</code>属性。使用<code translate="no" class="notranslate text-nowrap">v-model</code>绑定。
</p>
<h2 id="sorting" class="bv-no-focus-ring"><span class="bd-content-title">排序<a class="anchorjs-link" href="#sorting" aria-labelledby="sorting"></a></span></h2>
<p>
  如上文 <a href="#fields-column-definitions" class="font-weight-bold">字段</a>部分所述，
  您可以使列在<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>中可排序。
  单击可排序的列标题将按升序对列进行排序（从小到大），而再次单击将将排序方向切换为降序（从大到大）。 单击不可排序的列将清除排序（可以使用属性<code translate="no" class="notranslate text-nowrap">no-sort-reset</code>禁用此功能）。
</p>
<p>
  您可以控制对哪一列进行预排序以及排序顺序（升序或降序）。 要预先指定要排序的列，请将<code translate="no" class="notranslate text-nowrap">sort-by</code>属性设置为字段的键。
  通过将<code translate="no" class="notranslate text-nowrap">sort-desc</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>（降序）
  或<code translate="no" class="notranslate text-nowrap">false</code>（默认值升序）来设置排序方向。
</p>
<ul>
<li><strong>上升</strong>: 
  项目按从低到高的顺序（即<code translate="no" class="notranslate text-nowrap">A</code>到<code translate="no" class="notranslate text-nowrap">Z</code>）排序，并在第一行中以最低的值显示，在随后的行中以更高的值显示。
</li>
<li><strong>降序</strong>: 
  项目按从高到低的顺序（即<code translate="no" class="notranslate text-nowrap">A</code>到<code translate="no" class="notranslate text-nowrap">Z</code>）排序，并在第一行中以最高值显示，在随后的行中以较低的值显示。
</li>
</ul>
<p>
  通过添加<code translate="no" class="notranslate text-nowrap">.sync</code>修饰符，
  可以将props <code translate="no" class="notranslate text-nowrap">sort-by</code>和<code translate="no" class="notranslate text-nowrap">sort-desc</code>转换为双向（可同步）props。
   然后，将根据当前的排序标准相应地更新您的绑定变量。 有关.sync属性修饰符的详细信息，请参见<a href="http://vuejs.org/v2/guide/components.html#sync-Modifier" target="_blank" rel="noopener">Vue 文档</a>。
</p>
<p>
  将<code translate="no" class="notranslate text-nowrap">排序依据</code>设置为未在字段中定义为<code translate="no" class="notranslate text-nowrap">可排序</code>的列将导致表未排序。
</p>
<p>
  设置属性<code translate="no" class="notranslate text-nowrap">foot-clone</code>后，即使您具有自定义格式的页脚字段标题，
  页脚标题也将允许通过单击进行排序。 若要禁用排序图标和通过单击页脚中的标题单击来进行排序，请将<code translate="no" class="notranslate text-nowrap">无页脚排序</code>属性设置为true。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-sorting notranslate">
<div>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table" id="__BVID__1181">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="">Last Name<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" aria-sort="none" class="">First Name<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" aria-sort="ascending" class="">Age<span class="sr-only"> (Click to sort Descending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">Is Active<span class="sr-only"> (Click to clear sorting)</span></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Shaw</td>
<td aria-colindex="2" role="cell" class="">Larsen</td>
<td aria-colindex="3" role="cell" class="">21</td>
<td aria-colindex="4" role="cell" class="">false</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Carney</td>
<td aria-colindex="2" role="cell" class="">Jami</td>
<td aria-colindex="3" role="cell" class="">38</td>
<td aria-colindex="4" role="cell" class="">true</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Macdonald</td>
<td aria-colindex="2" role="cell" class="">Dickerson</td>
<td aria-colindex="3" role="cell" class="">40</td>
<td aria-colindex="4" role="cell" class="">true</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Wilson</td>
<td aria-colindex="2" role="cell" class="">Geneva</td>
<td aria-colindex="3" role="cell" class="">89</td>
<td aria-colindex="4" role="cell" class="">false</td>
</tr>
</tbody>
</table>
</div>
<div> Sorting By: <b>age</b>, Sort Direction: <b>Ascending</b></div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
      <span class="hljs-attr">:sort-by.sync</span>=<span class="hljs-string">"sortBy"</span>
      <span class="hljs-attr">:sort-desc.sync</span>=<span class="hljs-string">"sortDesc"</span>
      <span class="hljs-attr">responsive</span>=<span class="hljs-string">"sm"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      Sorting By: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>{{ sortBy }}<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>, Sort Direction:
      <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>{{ sortDesc ? 'Descending' : 'Ascending' }}<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">sortBy</span>: <span class="hljs-string">'age'</span>,
        <span class="hljs-attr">sortDesc</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">fields</span>: [
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'last_name'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'first_name'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'age'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'isActive'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">false</span> }
        ],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Carney'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="sort-icon-alignment" class="bv-no-focus-ring"><span class="bd-content-title">排序图标对齐<a class="anchorjs-link" href="#sort-icon-alignment" aria-labelledby="sort-icon-alignment"></a></span></h3>
<p>
  默认情况下，排序图标在标题单元格中显示为右对齐。 您可以通过在<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>上设置属性<code translate="no" class="notranslate text-nowrap">sort-icon-left</code> 来更改图标以使其左对齐。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-sorting-left notranslate">
<div>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table" id="__BVID__1194">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">Last Name<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" aria-sort="none" class="b-table-sort-icon-left">First Name<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" aria-sort="ascending" class="b-table-sort-icon-left">Age<span class="sr-only"> (Click to sort Descending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">Is Active<span class="sr-only"> (Click to clear sorting)</span></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Shaw</td>
<td aria-colindex="2" role="cell" class="">Larsen</td>
<td aria-colindex="3" role="cell" class="">21</td>
<td aria-colindex="4" role="cell" class="">false</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Carney</td>
<td aria-colindex="2" role="cell" class="">Jami</td>
<td aria-colindex="3" role="cell" class="">38</td>
<td aria-colindex="4" role="cell" class="">true</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Macdonald</td>
<td aria-colindex="2" role="cell" class="">Dickerson</td>
<td aria-colindex="3" role="cell" class="">40</td>
<td aria-colindex="4" role="cell" class="">true</td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class="">Wilson</td>
<td aria-colindex="2" role="cell" class="">Geneva</td>
<td aria-colindex="3" role="cell" class="">89</td>
<td aria-colindex="4" role="cell" class="">false</td>
</tr>
</tbody>
</table>
</div>
<div> Sorting By: <b>age</b>, Sort Direction: <b>Ascending</b></div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
      <span class="hljs-attr">:sort-by.sync</span>=<span class="hljs-string">"sortBy"</span>
      <span class="hljs-attr">:sort-desc.sync</span>=<span class="hljs-string">"sortDesc"</span>
      <span class="hljs-attr">sort-icon-left</span>
      <span class="hljs-attr">responsive</span>=<span class="hljs-string">"sm"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      Sorting By: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>{{ sortBy }}<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>, Sort Direction:
      <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>{{ sortDesc ? 'Descending' : 'Ascending' }}<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">sortBy</span>: <span class="hljs-string">'age'</span>,
        <span class="hljs-attr">sortDesc</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">fields</span>: [
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'last_name'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'first_name'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'age'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'isActive'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">false</span> }
        ],
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Macdonald'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Shaw'</span> },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Wilson'</span> },


          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">first_name</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last_name</span>: <span class="hljs-string">'Carney'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="customizing-the-sort-icons" class="bv-no-focus-ring"><span class="bd-content-title">自定义排序图标<a class="anchorjs-link" href="#customizing-the-sort-icons" aria-labelledby="customizing-the-sort-icons"></a></span></h3>
<p>
  排序图标是通过使用SVG背景图像生成的。可以通过更新BootstrapVue的SASS/SCSS变量并重新编译SCSS源代码来更改图标。有关自定义Bootstrap和BootstrapVue生成的CSS的详细信息，
  请参阅<a href="../../../bootstrap-vue/docs/reference/theming" class="font-weight-bold">主题</a>部分。
</p>
<h3 id="sort-compare-routine" class="bv-no-focus-ring"><span class="bd-content-title">排序比较常规<a class="anchorjs-link" href="#sort-compare-routine" aria-labelledby="sort-compare-routine"></a></span></h3>
<p>
  内部内置的默认<code translate="no" class="notranslate text-nowrap">sort-compare</code>函数根据基础记录对象中的数据对指定的字段 <code translate="no" class="notranslate text-nowrap">键</code>
  进行排序（如果字段具有格式化程序功能，并且该字段的<code translate="no" class="notranslate text-nowrap">sortByFormatted</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>，则按格式化值排序）。 如果字段值是一个对象，则首先对其进行字符串化，然后进行排序。
</p>
<p><strong>注意事项:</strong></p>
<ul>
<li>
  内置的<code translate="no" class="notranslate text-nowrap">sort-compare</code>例程无法基于字段数据的自定义呈现进行排序：作用域插槽仅用于显示，<strong>不会</strong>影响基础数据。
</li>
<li>
  如果字段属性<code translate="no" class="notranslate text-nowrap">sortByFormatted</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>，则具有 <a href="#formatter-callback" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">格式化程序</code> 功能</a>
  的<a href="#field-definition-reference" class="font-weight-bold">字段</a>（虚拟字段或常规字段）可以通过格式化程序功能返回的值进行排序。（可选）您可以将格式器函数引用传递给<code translate="no" class="notranslate text-nowrap">sortByFormatted</code>，
  以在排序之前对值进行格式化。 默认值为false，它将按原始字段值排序。 这仅适用于内置的<code translate="no" class="notranslate text-nowrap">sortByFormatted</code>例程。
</li>
<li>
  默认情况下，内部排序例程将首先对<code translate="no" class="notranslate text-nowrap">null</code>, 
  <code translate="no" class="notranslate text-nowrap">undefined</code>或空字符串值（小于任何其他值）进行排序。 
  要排序以使<code translate="no" class="notranslate text-nowrap">null</code>, 
  <code translate="no" class="notranslate text-nowrap">undefined</code>或空字符串值最后出现（大于任何其他值），
  请将<code translate="no" class="notranslate text-nowrap">sort-null-last</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>。
</li>
</ul>
<p>
  要自定义排序比较处理，请参阅下面的<a href="#custom-sort-compare-routine" class="font-weight-bold">自定义排序比较例程</a>部分。
</p>
<h3 id="internal-sorting-and-locale-handling" class="bv-no-focus-ring"><span class="bd-content-title">内部排序和语言环境处理<a class="anchorjs-link" href="#internal-sorting-and-locale-handling" aria-labelledby="internal-sorting-and-locale-handling"></a></span></h3>
<p>
  内部sort-compare例程使用
  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">String.prototype.localeCompare()</code></a> 
  来比较字符串化的列值（如果要比较的值既不是<code translate="no" class="notranslate text-nowrap">Number</code>
  也不是<code translate="no" class="notranslate text-nowrap">Date</code>类型）。浏览器的本地<code translate="no" class="notranslate text-nowrap">localeCompare()</code>
  方法接受一个语言环境字符串（或语言环境字符串数组）和一个用于控制字符串排序方式的<code translate="no" class="notranslate text-nowrap">options</code>对象。
  默认选项为<code translate="no" class="notranslate text-nowrap">{ numeric: true }</code>，并且语言环境未定义（使用浏览器的默认语言环境）。
</p>
<p>
  您可以通过<code translate="no" class="notranslate text-nowrap">sort-compare-locale</code>属性更改语言环境，
  以设置要进行排序的语言环境，也可以通过<code translate="no" class="notranslate text-nowrap">sort-compare-options</code>属性传递排序选项。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">sort-compare-locale</code>属性默认为<code translate="no" class="notranslate text-nowrap">undefined</code>，
  它使用浏览器（或Node.js运行时）的默认语言环境。属性<code translate="no" class="notranslate text-nowrap">sort-compare-locale</code>可以接受<a href="http://tools.ietf.org/html/rfc5646" target="_blank" rel="noopener">BCP 47 language tag</a>
  字符串或此类标签的数组。 有关语言环境的更多详细信息，请参阅MDN上的<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation" target="_blank" rel="noopener">Locale identification and negotiation</a>。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">sort-compare-options</code>属性接受包含以下任何属性的对象：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">localeMatcher</code>: 
  要使用的语言环境匹配算法。 可能的值为<code translate="no" class="notranslate text-nowrap">'lookup'</code>和
  <code translate="no" class="notranslate text-nowrap">'best fit'</code>。 默认值为<code translate="no" class="notranslate text-nowrap">'best fit'</code>。
  有关此选项的信息，请参见 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation" target="_blank" rel="noopener">MDN Intl 页面</a>以获取详细信息。
</li>
<li><code translate="no" class="notranslate text-nowrap">sensitivity</code>: 字符串中的哪些差异应导致比较结果值非零。 可能的值为：
<ul>
<li><code translate="no" class="notranslate text-nowrap">'base'</code>: 
  只有基本字母不同的字符串才能比较为不相等。 示例：<code translate="no" class="notranslate text-nowrap">a ≠ b</code>, <code translate="no" class="notranslate text-nowrap">a = á</code>, 
  <code translate="no" class="notranslate text-nowrap">a = A</code>。
</li>
<li><code translate="no" class="notranslate text-nowrap">'accent'</code>: 
  仅将基本字母或重音和其他音标不同的字符串视为不相等。示例：<code translate="no" class="notranslate text-nowrap">a ≠ b</code>, 
  <code translate="no" class="notranslate text-nowrap">a ≠ á</code>, 
  <code translate="no" class="notranslate text-nowrap">a = A</code>。
</li>
<li><code translate="no" class="notranslate text-nowrap">'case'</code>: 仅将基本字母或大小写不同的字符串比较为不相等。例子： <code translate="no" class="notranslate text-nowrap">a ≠ b</code>, <code translate="no" class="notranslate text-nowrap">a = á</code>, <code translate="no" class="notranslate text-nowrap">a ≠ A</code>.

</li>
<li><code translate="no" class="notranslate text-nowrap">'variant'</code>: <strong>（默认值）</strong>基本字母，重音符号和其他变音符号或大小写不同的字符串比较不相等。 也可以考虑其他差异。 例子：<code translate="no" class="notranslate text-nowrap">a ≠ b</code>, <code translate="no" class="notranslate text-nowrap">a ≠ á</code>, <code translate="no" class="notranslate text-nowrap">a ≠ A</code>.</li>
</ul>
</li>
<li><code translate="no" class="notranslate text-nowrap">ignorePunctuation</code>:
  标点符号是否应被忽略。 可能的值为<code translate="no" class="notranslate text-nowrap">true</code>和
  <code translate="no" class="notranslate text-nowrap">false</code>。 默认值为<code translate="no" class="notranslate text-nowrap">false</code>。
</li>
<li><code translate="no" class="notranslate text-nowrap">numeric</code>: 
  是否应使用数字排序规则，例如<code translate="no" class="notranslate text-nowrap">'1' &lt; '2' &lt; '10'</code>。
  可能的值为<code translate="no" class="notranslate text-nowrap">true</code>和
  <code translate="no" class="notranslate text-nowrap">false</code>。 默认值为 <code translate="no" class="notranslate text-nowrap">false</code>。
  请注意，不需要支持（浏览器，运行时）实现即可支持此属性，因此可能会忽略它。
</li>
<li><code translate="no" class="notranslate text-nowrap">caseFirst</code>: 
  大写还是小写都应该首先排序。 可能的值为<code translate="no" class="notranslate text-nowrap">'upper'</code>, 
  <code translate="no" class="notranslate text-nowrap">'lower'</code>,或 
  <code translate="no" class="notranslate text-nowrap">'false'</code>（使用语言环境的默认值）。默认值为<code translate="no" class="notranslate text-nowrap">'false'</code>。 不需要实现来支持此属性。
</li>
<li><code translate="no" class="notranslate text-nowrap">'usage'</code>: <strong>始终</strong> 
  始终由<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>设置为<code translate="no" class="notranslate text-nowrap">'sort'</code>。
</li>
</ul>
<p><strong>例子 1:</strong> 
  如果要对德语单词进行排序，请设置<code translate="no" class="notranslate text-nowrap">sort-compare-locale="de"</code>
  （德语， <code translate="no" class="notranslate text-nowrap">ä</code>排序在 <code translate="no" class="notranslate text-nowrap">z</code>之前）
  或瑞典语设置<code translate="no" class="notranslate text-nowrap">sort-compare-locale="sv"</code>
  （瑞典语，<code translate="no" class="notranslate text-nowrap">ä</code>排序在<code translate="no" class="notranslate text-nowrap">z</code>之后）
</p>
<p><strong>例子 2:</strong> 要比较数字字符串，并忽略大小写和重音符号：</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:sort-compare-options</span>=<span class="hljs-string">"{ numeric: true, sensitivity: 'base' }"</span> <span class="hljs-attr">...</span>&gt;</span></pre></figure>
<p><strong>注意事项:</strong></p>
<ul>
<li>
  有关选项对象属性值的详细信息，请参考 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" target="_blank" rel="noopener">MDN <code translate="no" class="notranslate text-nowrap">String.prototype.localeCompare()</code> 文档</a>。
</li>
<li>
  有关语言环境值的详细信息，请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument" target="_blank" rel="noopener">MDN 语言环境文档</a> 。
</li>
<li>
  并非所有浏览器（或Node.js）都支持<code translate="no" class="notranslate text-nowrap">String.prototype.localeCompare()</code>
  的<code translate="no" class="notranslate text-nowrap">语言环境</code>和<code translate="no" class="notranslate text-nowrap">选项</code>。
  请参阅<a href="https://caniuse.com/#feat=localecompare" target="_blank" rel="noopener">Can I Use</a>以获得浏览器支持。
  对于Node.js，您可能需要添加<a href="https://nodejs.org/api/intl.html" target="_blank" rel="noopener">Intl support</a>来处理语言环境（默认设置除外），
  以防止<a href="https://ssr.vuejs.org/guide/hydration.html" target="_blank" rel="noopener">SSR水化不匹配错误</a>。
</li>
</ul>
<h3 id="custom-sort-compare-routine" class="bv-no-focus-ring"><span class="bd-content-title">自定义排序比较例程<a class="anchorjs-link" href="#custom-sort-compare-routine" aria-labelledby="custom-sort-compare-routine"></a></span></h3>
<p>
  您可以通过将函数引用传递给属性<code translate="no" class="notranslate text-nowrap">sort-compare</code>来提供自己的自定义排序比较例程。
  传递了<code translate="no" class="notranslate text-nowrap">sort-compare</code>例程的七（7）个参数，其中最后4个是可选的：
</p>
<ul>
<li>
  前两个参数（<code translate="no" class="notranslate text-nowrap">a</code>和<code translate="no" class="notranslate text-nowrap">b</code>）是要比较的行的记录对象
</li>
<li>
  第三个参数是排序的字段<code translate="no" class="notranslate text-nowrap">键</code>（<code translate="no" class="notranslate text-nowrap">sortBy</code>）
</li>
<li>
  第四个参数（<code translate="no" class="notranslate text-nowrap">sortDesc</code>）是<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>
  将显示记录的顺序（<code translate="no" class="notranslate text-nowrap">true</code>为降序，<code translate="no" class="notranslate text-nowrap">false</code>为升序）
</li>
<li>
  第五个参数是对该字段<a href="#formatter-callback" class="font-weight-bold">格式化函数</a>的引用，
  或者是该字段的<code translate="no" class="notranslate text-nowrap">filterByFormatted</code>值（如果它是函数引用）的引用。
  如果未找到格式化程序，则该值将是不确定的。如果需要按格式排序，则需要调用此方法以获取格式化的字段值：
  <code translate="no" class="notranslate text-nowrap">valA = formatter(a[key], key, a)</code>和
 <code translate="no" class="notranslate text-nowrap">valB = formatter(b[key], key, b)</code>值。
 如果字段的<code translate="no" class="notranslate text-nowrap">sortByFormatted</code>属性为<code translate="no" class="notranslate text-nowrap">true</code>或不是格式化程序函数的引用，或者找不到字段格式化程序的函数，则此字段未定义。
</li>
<li>
  第六个参数是<code translate="no" class="notranslate text-nowrap">sort-compare-options</code>属性的值（默认为<code translate="no" class="notranslate text-nowrap">{ numeric: true }</code>）
</li>
<li>
  第七个参数是<code translate="no" class="notranslate text-nowrap">sort-compare-locale</code>属性的值（默认为<code translate="no" class="notranslate text-nowrap">undefined</code>）
</li>
</ul>
<p>
  如果使用<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">String.prototype.localeCompare()</code></a>方法比较字符串，则可以使用第六和第七个参数。
</p>
<p>
  在大多数典型情况下，您只需要使用前三个参数。 第四个参数-排序方向-通常不应使用，因为<code translate="no" class="notranslate text-nowrap">b-table</code>将处理该方向，
  并且通常仅在对<code translate="no" class="notranslate text-nowrap">null</code>和/或 
  <code translate="no" class="notranslate text-nowrap">undefined</code>值的排序方式进行特殊处理（即首先对<code translate="no" class="notranslate text-nowrap">null</code>/<code translate="no" class="notranslate text-nowrap">undefined</code>进行排序或 持续）。
</p>
<p>
  例程应为<code translate="no" class="notranslate text-nowrap">a[key] &lt; b[key]</code>
  返回<code translate="no" class="notranslate text-nowrap">-1</code>（或负值），
  为<code translate="no" class="notranslate text-nowrap">a[key] === b[key]</code>返回0，或为<code translate="no" class="notranslate text-nowrap">a[key] &gt; b[key]</code>返回1（或正值）。
    </p>
<p>
  您的自定义排序比较例程还可以返回<code translate="no" class="notranslate text-nowrap">null</code>或<code translate="no" class="notranslate text-nowrap">false</code>，
  以回退到特定键的内置排序比较例程。 您可以使用此功能（即，通过返回<code translate="no" class="notranslate text-nowrap">null</code>）让您的自定义排序比较例程仅处理某些字段（<code translate="no" class="notranslate text-nowrap">key</code>），
  例如虚拟（作用域插槽）列的特殊情况，并具有内部（内置）排序比较 处理所有其他领域。
</p>
<p>
  默认的排序比较例程的工作原理与以下类似。 请注意，排序比较中<strong>不</strong>使用第四个参数（排序方向）：
</p>
<!-- eslint-disable no-unused-vars, no-undef -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sortCompare</span>(<span class="hljs-params">aRow, bRow, key, sortDesc, formatter, compareOptions, compareLocale</span>) </span>{
  <span class="hljs-keyword">const</span> a = aRow[key] <span class="hljs-comment">// or use Lodash `_.get()`</span>
  <span class="hljs-keyword">const</span> b = bRow[key]
  <span class="hljs-keyword">if</span> (
    (<span class="hljs-keyword">typeof</span> a === <span class="hljs-string">'number'</span> &amp;&amp; <span class="hljs-keyword">typeof</span> b === <span class="hljs-string">'number'</span>) ||
    (a <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Date</span> &amp;&amp; b <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Date</span>)
  ) {
    <span class="hljs-comment">// If both compared fields are native numbers or both are native dates</span>
    <span class="hljs-keyword">return</span> a &lt; b ? <span class="hljs-number">-1</span> : a &gt; b ? <span class="hljs-number">1</span> : <span class="hljs-number">0</span>
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-comment">// Otherwise stringify the field data and use String.prototype.localeCompare</span>
    <span class="hljs-keyword">return</span> toString(a).localeCompare(toString(b), compareLocale, compareOptions)
  }
}

<span class="hljs-comment">// Helper function to stringify the values of an Object</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toString</span>(<span class="hljs-params">value</span>) </span>{
  <span class="hljs-keyword">if</span> (value === <span class="hljs-literal">null</span> || <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">'undefined'</span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-string">''</span>
  } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (value <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Object</span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.keys(value)
      .sort()
      .map(<span class="hljs-function"><span class="hljs-params">key</span> =&gt;</span> toString(value[key]))
      .join(<span class="hljs-string">' '</span>)
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">String</span>(value)
  }
}</pre></figure>
<h3 id="disable-local-sorting" class="bv-no-focus-ring"><span class="bd-content-title">禁用本地排序<a class="anchorjs-link" href="#disable-local-sorting" aria-labelledby="disable-local-sorting"></a></span></h3>
<p>
  如果您想完全在应用中处理排序，则可以通过将属性<code translate="no" class="notranslate text-nowrap">no-local-sorting</code>
  设置为true来禁用<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>中的本地排序，
  同时仍然保持可排序标头功能（通过<code translate="no" class="notranslate text-nowrap">sort-changed</code>或 
  <code translate="no" class="notranslate text-nowrap">context-changed</code>的事件以及可同步的道具）。
</p>
<p>
  您可以使用可同步属性<code translate="no" class="notranslate text-nowrap">sort-by.sync</code>和<code translate="no" class="notranslate text-nowrap">sort-desc.sync</code> 来检测排序列和方向的变化。
</p>
<p>
  同样，当单击可排序的列标题（或页脚）时，将通过包含<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>上下文对象的单个参数发出
    <code translate="no" class="notranslate text-nowrap">sort-changed</code>的事件。 有关排序已更改事件和上下文对象的详细信息，请参见下面的<a href="#detection-of-sorting-change" class="font-weight-bold">检测排序更改</a>部分。
</p>
<p>
  当<code translate="no" class="notranslate text-nowrap">no-local-sorting</code>为true时，<code translate="no" class="notranslate text-nowrap">sort-compare</code>属性无效。
</p>
<h3 id="change-initial-sort-direction" class="bv-no-focus-ring"><span class="bd-content-title">更改初始排序方向<a class="anchorjs-link" href="#change-initial-sort-direction" aria-labelledby="change-initial-sort-direction"></a></span></h3>
<p>
  通过使用<code translate="no" class="notranslate text-nowrap">排序方向</code>属性，控制单击可排序的列标题时应用升序和降序排序的顺序。
   默认值<code translate="no" class="notranslate text-nowrap">'asc'</code>首先应用升序排序（当当前未对列进行排序时）。
   要反转行为并首先按降序排序，请将其设置为<code translate="no" class="notranslate text-nowrap">'desc'</code>。
</p>
<p>
  如果您不希望在单击另一个可排序的列标题时更改当前的<code translate="no" class="notranslate text-nowrap">排序方向</code>，
  请将排序方向设置为<code translate="no" class="notranslate text-nowrap">'last'</code>。 这将保持先前排序列的排序方向。
</p>
<p>
  对于单个列的初始排序方向（当列从未排序过渡到已排序时适用），请在字段中指定属性<code translate="no" class="notranslate text-nowrap">sortDirection</code>。
  有关使用此功能的示例，请参见下面的<a href="#complete-example" class="font-weight-bold">完整事例</a>。
</p>
<h2 id="filtering" class="bv-no-focus-ring"><span class="bd-content-title">筛选<a class="anchorjs-link" href="#filtering" aria-labelledby="filtering"></a></span></h2>
<p>
  使用过滤时，默认情况下将过滤应用于原始项数组数据。 <code translate="no" class="notranslate text-nowrap">b-table</code>提供了几种有关如何过滤数据的选项。
</p>
<p>
  当前无法通过<a href="#scoped-field-slots" class="font-weight-bold">作用域范围内的插槽</a>基于格式化结果进行过滤。
</p>
<h3 id="built-in-filtering" class="bv-no-focus-ring"><span class="bd-content-title">内置过滤<a class="anchorjs-link" href="#built-in-filtering" aria-labelledby="built-in-filtering"></a></span></h3>
<p>
  对该项目的行数据值进行字符串化（有关如何完成字符串化，请参见上面的排序部分），并且过滤器搜索该字符串化数据（不包括下划线<code translate="no" class="notranslate text-nowrap">'_'</code>)开头的任何特殊属性）。 默认情况下，字符串化还包括未显示在所提供列中的任何数据。
</p>
<p>
  使用默认的内置<code translate="no" class="notranslate text-nowrap">过滤器</code>功能，
  过滤器支持值可以是字符串或<code translate="no" class="notranslate text-nowrap">RegExp</code>对象（正则表达式不应设置<code translate="no" class="notranslate text-nowrap">/g</code>全局标志）。
</p>
<p>
  如果字符串化的行包含提供的字符串值或与RegExp表达式匹配，则它将包含在显示的结果中。
</p>
<p>
  将<code translate="no" class="notranslate text-nowrap">过滤器</code>属性设置为<code translate="no" class="notranslate text-nowrap">null</code>或为空字符串以清除当前过滤器。
</p>
<h3 id="built-in-filtering-options" class="bv-no-focus-ring"><span class="bd-content-title">内置过滤选项<a class="anchorjs-link" href="#built-in-filtering-options" aria-labelledby="built-in-filtering-options"></a></span></h3>
<p>有几个选项可用于控制对过滤器应用哪些数据。</p>
<ul>
<li>
  <code translate="no" class="notranslate text-nowrap">filter-ignored-fields</code>属性接受一个顶级（行数据的直接属性）字段键的数组，在过滤时应将其忽略。
</li>
<li>
  <code translate="no" class="notranslate text-nowrap">filter-included-fields</code>性接受过滤时应使用的顶级（行数据的直接属性）字段键的数组。
  未包括在此数组中的所有其他字段键将被忽略。 要在特定列上进行过滤时，此功能非常方便。 如果指定的数组为空，则包括所有字段，但通过属性<code translate="no" class="notranslate text-nowrap">filter-included-fields</code>
  指定的字段除外。 如果在忽略过滤器的字段和包含过滤器的字段中都指定了字段关键字，则包含过滤器的字段优先。
</li>
<li>
  通常，<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>根据已字符串化的记录数据进行过滤。
  如果该字段指定了<code translate="no" class="notranslate text-nowrap">格式化程序</code>功能，
  则可以通过将<a href="#field-definition-reference" class="font-weight-bold">字段定义属性</a>
  <code translate="no" class="notranslate text-nowrap">filterByFormatted</code> 设置为<code translate="no" class="notranslate text-nowrap">true</code>来基于格式化程序的结果进行过滤。
  如果该字段没有格式化程序功能，则忽略此选项。 您可以选择将格式器函数引用（仅用于过滤）传递给字段定义属性<code translate="no" class="notranslate text-nowrap">filterByFormatted</code>。
</li>
</ul>
<p>
  使用<a href="#custom-filter-function" class="font-weight-bold">自定义过滤器</a>>功能或基于<a href="#custom-filter-function" class="font-weight-bold">项目提供程序</a>的过滤时，props的<code translate="no" class="notranslate text-nowrap">filter-ignored-fields</code>和
  <code translate="no" class="notranslate text-nowrap">filter-included-fields</code>
  字段以及字段定义属性 <code translate="no" class="notranslate text-nowrap">filterByFormatted</code>无效。
</p>
<h3 id="custom-filter-function" class="bv-no-focus-ring"><span class="bd-content-title">自定义过滤器<a class="anchorjs-link" href="#custom-filter-function" aria-labelledby="custom-filter-function"></a></span></h3>
<p>
  您还可以通过将属性 <code translate="no" class="notranslate text-nowrap">过滤器功能</code>设置为自定义过滤器测试功能的引用来使用自定义过滤器功能。过滤器函数将传递两个参数：
</p>
<ul>
<li>
   原始项目行记录数据对象，<strong>将此参数视为只读。</strong>
</li>
<li>
  <code translate="no" class="notranslate text-nowrap">过滤器</code>性的内容（可以是字符串，RegExp，数组或对象）
</li>
</ul>
<p>
  如果记录符合您的条件，则该函数应返回<code translate="no" class="notranslate text-nowrap">true</code>；如果要过滤掉记录，
  则该函数应返回<code translate="no" class="notranslate text-nowrap">false</code>。
</p>
<p>
  为了对显示的数据进行适当的反应性更新，在不过滤时，应将<code translate="no" class="notranslate text-nowrap">过滤器</code>属性设置为
  <code translate="no" class="notranslate text-nowrap">null</code>或空字符串（而不是空对象或数组）。当<code translate="no" class="notranslate text-nowrap">过滤器</code>属性为假值时，不会调用筛选器功能。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">空过滤器文本</code>的显示取决于<code translate="no" class="notranslate text-nowrap">empty-filter-text</code>的真实性。
</p>
<h3 id="filter-events" class="bv-no-focus-ring"><span class="bd-content-title">过滤事件<a class="anchorjs-link" href="#filter-events" aria-labelledby="filter-events"></a></span></h3>
<p>
  当应用本地过滤，并且结果的项目数量发生变化时，<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>将发出带有两个参数的<code translate="no" class="notranslate text-nowrap">过滤</code>事件：
</p>
<ul>
<li>数组引用，它是通过过滤例程的项目的完整列表。<strong>将此参数视为只读。</strong></li>
<li>通过过滤器测试的记录数（第一个参数的长度）</li>
</ul>
<p>
  将属性<code translate="no" class="notranslate text-nowrap">过滤器</code>设置为null或空字符串将清除本地项目过滤。
</p>
<h3 id="debouncing-filter-criteria-changes" class="bv-no-focus-ring"><span class="bd-content-title">取消过滤条件的更改<a class="anchorjs-link" href="#debouncing-filter-criteria-changes" aria-labelledby="debouncing-filter-criteria-changes"></a></span></h3>
<p><span class="badge badge-warning small">在v2.1.0中已弃用</span> 
  请使用<a href="../../../bootstrap-vue/docs/components/form-input#debounce-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-input&gt;</code></a>的
    <code translate="no" class="notranslate text-nowrap">反跳</code>功能。
  </p>
<p>
  如果您的文本输入与<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>的<code translate="no" class="notranslate text-nowrap">过滤器</code>属性相关联，
    则过滤过程将针对用户键入的每个字符进行。 对于大型项目数据集，此过程可能需要一段时间，并且可能会导致文本输入显示缓慢。
</p>
<p>
  为了帮助缓解这种情况，<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>
  通过<code translate="no" class="notranslate text-nowrap">filter-debounce</code>属性接受一个反跳timout值（以毫秒为单位）。
  默认值为<code translate="no" class="notranslate text-nowrap">0</code>（毫秒）。如果提供的值大于<code translate="no" class="notranslate text-nowrap">0</code>，
  则过滤器将等待该时间，然后再更新表格结果。 如果<code translate="no" class="notranslate text-nowrap">过滤器</code>属性值在该超时时间到期之前发生更改，则过滤将再次延迟，直到防抖动超时时间结束。
</p>
<p>
  使用时，<code translate="no" class="notranslate text-nowrap">filter-debounce</code>的建议值应
  在<code translate="no" class="notranslate text-nowrap">100</code>到
  <code translate="no" class="notranslate text-nowrap">200</code>的范围内，但其他值可能更适合您的用例。
</p>
<p>
  在将提供程序过滤与<a href="#using-items-provider-functions" class="font-weight-bold">项目提供程序功能</a>一起使用时，使用此道具会很有用，以帮助减少对后端API的调用次数。
</p>
<h3 id="filtering-notes" class="bv-no-focus-ring"><span class="bd-content-title">过滤器 注意事项<a class="anchorjs-link" href="#filtering-notes" aria-labelledby="filtering-notes"></a></span></h3>
<p>
  有关使用<code translate="no" class="notranslate text-nowrap">过滤器</code>功能的示例，请参见下面的<a href="#complete-example" class="font-weight-bold">完整实例</a>。
</p>
<h2 id="pagination" class="bv-no-focus-ring"><span class="bd-content-title">分页<a class="anchorjs-link" href="#pagination" aria-labelledby="pagination"></a></span></h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>支持内置的项目数据分页。
  您可以通过将<code translate="no" class="notranslate text-nowrap">每页</code>属性设置为想要显示的最大行数来控制一次显示多少行，
  并使用<code translate="no" class="notranslate text-nowrap">当前页</code>属性指定要显示的页面（从第<code translate="no" class="notranslate text-nowrap">1</code>页开始）。
  如果将<code translate="no" class="notranslate text-nowrap">当前页</code>设置为大于计算的页面数的值，则不会显示任何行。
</p>
<p>
  您可以将<a href="../../../bootstrap-vue/docs/components/pagination" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-pagination&gt;</code></a> 
    组件与<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>结合使用，以提供对分页的控制。
</p>
<p>
  将<code translate="no" class="notranslate text-nowrap">每页</code>设置为<code translate="no" class="notranslate text-nowrap">0</code>（默认值）将禁用本地项目分页功能。
</p>
<h2 id="using-items-provider-functions" class="bv-no-focus-ring"><span class="bd-content-title">使用项目提供者功能<a class="anchorjs-link" href="#using-items-provider-functions" aria-labelledby="using-items-provider-functions"></a></span></h2>
<p>
  如在<a href="#items-record-data" class="font-weight-bold">项目</a>属性部分所述，通过通过<code translate="no" class="notranslate text-nowrap">项目</code>属性指定函数引用，可以使用函数来提供行数据（项目）。
</p>
<p>使用以下标签属性调用提供程序函数：

</p>
<!-- eslint-disable no-undef -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no">provider(ctx, [callback])</pre></figure>
<p> 
  <code translate="no" class="notranslate text-nowrap">ctx</code> 是与表状态关联的上下文对象，并且包含以下五个属性：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">currentPage</code></td>
<td>Number</td>
<td>
  当前页码（从1开始，即<code translate="no" class="notranslate text-nowrap">当前页</code>属性的值）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">perPage</code></td>
<td>Number</td>
<td>
  每页显示的最大行数（<code translate="no" class="notranslate text-nowrap">每页</code>属性的值）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">filter</code></td>
<td>String or RegExp or Object</td>
<td>
  <code translate="no" class="notranslate text-nowrap">过滤器</code>属性的值
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">sortBy</code></td>
<td>String</td>
<td>当前正在排序的列键，如果未排序则为空字符串</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">sortDesc</code></td>
<td>Boolean</td>
<td>
  当前的排序方向（降序为<code translate="no" class="notranslate text-nowrap">true</code>，升序为<code translate="no" class="notranslate text-nowrap">false</code>）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">apiUrl</code></td>
<td>String</td>
<td>
  提供给<code translate="no" class="notranslate text-nowrap">api-url</code>属性的值。如果未提供，则为<code translate="no" class="notranslate text-nowrap">null</code>。
</td>
</tr>
</tbody>
</table>
</div>
<p>
  第二个参数<code translate="no" class="notranslate text-nowrap">callback</code>是使用回调异步方法时的可选参数。
</p>
<p><strong>示例： 返回数据数组（同步）：</strong></p>
<!-- eslint-disable no-unused-vars, prefer-const -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myProvider</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> items = []

  <span class="hljs-comment">// Perform any items processing needed</span>

  <span class="hljs-comment">// Must return an array</span>
  <span class="hljs-keyword">return</span> items || []
}</pre></figure>
<p><strong>示例： 使用回调返回数据（异步）：</strong></p>
<!-- eslint-disable no-unused-vars, standard/no-callback-literal -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myProvider</span>(<span class="hljs-params">ctx, callback</span>) </span>{
  <span class="hljs-keyword">const</span> params = <span class="hljs-string">'?page='</span> + ctx.currentPage + <span class="hljs-string">'&amp;size='</span> + ctx.perPage

  <span class="hljs-keyword">this</span>.fetchData(<span class="hljs-string">'/some/url'</span> + params)
    .then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
      <span class="hljs-comment">// Pluck the array of items off our axios response</span>
      <span class="hljs-keyword">const</span> items = data.items
      <span class="hljs-comment">// Provide the array of items to the callback</span>
      callback(items)
    })
    .catch(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
      callback([])
    })

  <span class="hljs-comment">// Must return null or undefined to signal b-table that callback is being used</span>
  <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>
}</pre></figure>
<p><strong>示例： 使用Promise返回数据（异步）：</strong></p>
<!-- eslint-disable no-unused-vars, no-undef -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myProvider</span>(<span class="hljs-params">ctx</span>) </span>{
  <span class="hljs-keyword">const</span> promise = axios.get(<span class="hljs-string">'/some/url?page='</span> + ctx.currentPage + <span class="hljs-string">'&amp;size='</span> + ctx.perPage)

  <span class="hljs-comment">// Must return a promise that resolves to an array of items</span>
  <span class="hljs-keyword">return</span> promise.then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
    <span class="hljs-comment">// Pluck the array of items off our axios response</span>
    <span class="hljs-keyword">const</span> items = data.items
    <span class="hljs-comment">// Must return an array of items or an empty array if an error occurred</span>
    <span class="hljs-keyword">return</span> items || []
  })
}</pre></figure>
<h3 id="automated-table-busy-state" class="bv-no-focus-ring"><span class="bd-content-title">自动表格繁忙状态<a class="anchorjs-link" href="#automated-table-busy-state" aria-labelledby="automated-table-busy-state"></a></span></h3>
<p>
  使用项目提供程序功能时， <code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code> 自动跟踪/控制其<code translate="no" class="notranslate text-nowrap">繁忙</code>状态，
  但是它还提供了一个<code translate="no" class="notranslate text-nowrap">繁忙</code>属性，可用于覆盖内部<code translate="no" class="notranslate text-nowrap">繁忙</code>状态
  或监视<code translate="no" class="notranslate text-nowrap">&lt;b-pagination&gt;</code>当前繁忙 在您的应用程序中使用2-way<code translate="no" class="notranslate text-nowrap">.sync</code>修饰符声明状态。
</p>
<p><strong>注意:</strong> 
  为了允许<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>完全跟踪其<code translate="no" class="notranslate text-nowrap">繁忙</code>状态，自定义项提供程序功能应处理来自数据源的错误，
  并将空数组返回到<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>。
</p>
<p><strong>示例： 繁忙状态的使用</strong></p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"my-table"</span>
      <span class="hljs-attr">:busy.sync</span>=<span class="hljs-string">"isBusy"</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"myProvider"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
      <span class="hljs-attr">...</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data () {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">isBusy</span>: <span class="hljs-literal">false</span>
      }
    }
    <span class="hljs-attr">methods</span>: {
      myProvider () {
        <span class="hljs-comment">// Here we don't set isBusy prop, so busy state will be</span>
        <span class="hljs-comment">// handled by table itself</span>
        <span class="hljs-comment">// this.isBusy = true</span>
        <span class="hljs-keyword">let</span> promise = axios.get(<span class="hljs-string">'/some/url'</span>)

        <span class="hljs-keyword">return</span> promise.then(<span class="hljs-function">(<span class="hljs-params">data</span>) =&gt;</span> {
          <span class="hljs-keyword">const</span> items = data.items
          <span class="hljs-comment">// Here we could override the busy state, setting isBusy to false</span>
          <span class="hljs-comment">// this.isBusy = false</span>
          <span class="hljs-keyword">return</span>(items)
        }).catch(<span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> {
          <span class="hljs-comment">// Here we could override the busy state, setting isBusy to false</span>
          <span class="hljs-comment">// this.isBusy = false</span>
          <span class="hljs-comment">// Returning an empty array, allows table to correctly handle</span>
          <span class="hljs-comment">// internal busy state in case of error</span>
          <span class="hljs-keyword">return</span> []
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>注意事项:</strong></p>
<ul>
<li>
  如果您将表手动置于<code translate="no" class="notranslate text-nowrap">繁忙</code>状态，则在<code translate="no" class="notranslate text-nowrap">繁忙</code>状态设置
  为<code translate="no" class="notranslate text-nowrap">false</code>之前，
  将<strong>不会</strong>调用/刷新项目提供程序。
</li>
<li>
  处于<code translate="no" class="notranslate text-nowrap">繁忙</code>状态时（在提供程序更新期间自动设置，或在手动设置时），<strong>不会</strong>发出所有与单击相关的和悬停事件以及排序更改的事件。
</li>
</ul>
<h3 id="provider-paging-filtering-and-sorting" class="bv-no-focus-ring"><span class="bd-content-title">提供者分页，过滤和排序<a class="anchorjs-link" href="#provider-paging-filtering-and-sorting" aria-labelledby="provider-paging-filtering-and-sorting"></a></span></h3>
<p>
  默认情况下，在将数据传递到<code translate="no" class="notranslate text-nowrap">b-table</code>进行显示之前，items provider功能负责
  <strong>所有数据的分页，过滤和排序</strong>。
</p>
<p>
  您可以通过将以下<code translate="no" class="notranslate text-nowrap">b-table</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>来禁用提供程序的分页，筛选和排序（分别）：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">no-provider-paging</code></td>
<td>Boolean</td>
<td><code translate="no" class="notranslate text-nowrap">false</code></td>
<td>
  如果为<code translate="no" class="notranslate text-nowrap">true</code>，则启用使用<code translate="no" class="notranslate text-nowrap">b-table</code>本地数据分页
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">no-provider-sorting</code></td>
<td>Boolean</td>
<td><code translate="no" class="notranslate text-nowrap">false</code></td>
<td>
  如果为<code translate="no" class="notranslate text-nowrap">true</code>，则启用使用<code translate="no" class="notranslate text-nowrap">b-table</code>本地排序
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">no-provider-filtering</code></td>
<td>Boolean</td>
<td><code translate="no" class="notranslate text-nowrap">false</code></td>
<td>如果为<code translate="no" class="notranslate text-nowrap">true</code>，则启用使用<code translate="no" class="notranslate text-nowrap">b-table</code>本地过滤</td>
</tr>
</tbody>
</table>
</div>
<p>
  当<code translate="no" class="notranslate text-nowrap">no-provider-paging</code>为<code translate="no" class="notranslate text-nowrap">false</code> （默认值）时，您应仅返回最大的每页记录数。
</p>
<p><strong>注意事项:</strong></p>
<ul>
<li>
  <code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>需要引用您的分页和<code translate="no" class="notranslate text-nowrap">过滤器</code>，以便触发提供程序函数的调用。因此，
  请确保绑定到<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>上的<code translate="no" class="notranslate text-nowrap">每页</code>, 
  <code translate="no" class="notranslate text-nowrap">当前页</code>和 
  <code translate="no" class="notranslate text-nowrap">过滤器</code>属性以触发提供程序更新功能调用（除非您将各自的<code translate="no" class="notranslate text-nowrap">no-provider-*</code>
  属性设置为<code translate="no" class="notranslate text-nowrap">true</code>）。
</li>
<li>
  当<code translate="no" class="notranslate text-nowrap">项目</code>是提供程序功能时，<code translate="no" class="notranslate text-nowrap">no-local-sorting</code>属性无效。
</li>
<li>
  使用提供程序筛选时，您可能会发现，将
  <a href="../../../bootstrap-vue/docs/components/form-input#debounce-support" class="font-weight-bold">
    <code translate="no" class="notranslate text-nowrap">&lt;b-form-input&gt;</code>
    <code translate="no" class="notranslate text-nowrap">上的防反跳属性</code>
  </a> 
  设置为大于<code translate="no" class="notranslate text-nowrap">100</code>ms的值将有助于减少用户在标准中键入的对后端API的调用次数。
</li>
</ul>
<h3 id="force-refreshing-of-table-data" class="bv-no-focus-ring"><span class="bd-content-title">强制刷新表数据<a class="anchorjs-link" href="#force-refreshing-of-table-data" aria-labelledby="force-refreshing-of-table-data"></a></span></h3>
<p>
  您还可以通过在<code translate="no" class="notranslate text-nowrap">$root</code>上发出事件
  <code translate="no" class="notranslate text-nowrap">refresh::table</code>来触发提供程序函数的刷新，其中单个参数是<code translate="no" class="notranslate text-nowrap">b-table</code>
  的<code translate="no" class="notranslate text-nowrap">id</code>。 您必须在表上具有唯一的<code translate="no" class="notranslate text-nowrap">id</code>才能起作用。
</p>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::refresh::table'</span>, <span class="hljs-string">'my-table'</span>)</pre></figure>
<p>Or by calling the <code translate="no" class="notranslate text-nowrap">refresh()</code> method on the table reference</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"table"</span> <span class="hljs-attr">...</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">this</span>.$refs.table.refresh()</pre></figure>
<p><strong>注意:</strong> 
  如果表处于<code translate="no" class="notranslate text-nowrap">繁忙</code>状态（即当前正在运行提供程序更新），则刷新将一直等到当前更新完成。 如果当前有一个刷新待处理，并且请求一个新的刷新，则将仅发生一次刷新。
</p>
<h3 id="detection-of-sorting-change" class="bv-no-focus-ring"><span class="bd-content-title">检测分类变化<a class="anchorjs-link" href="#detection-of-sorting-change" aria-labelledby="detection-of-sorting-change"></a></span></h3>
<p>
  通过侦听<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>
  <code translate="no" class="notranslate text-nowrap">排序已更改</code>
  的事件，您可以检测到排序键和方向何时已更改。
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> @<span class="hljs-attr">sort-changed</span>=<span class="hljs-string">"sortingChanged"</span> <span class="hljs-attr">...</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  <code translate="no" class="notranslate text-nowrap">排序更改</code>事件提供了表的当前状态上下文对象的单个参数。 此上下文对象的格式与项目提供程序功能使用的格式相同。
</p>
<!-- eslint-disable no-unused-vars -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-attr">methods</span>: {
    sortingChanged(ctx) {
      <span class="hljs-comment">// ctx.sortBy   ==&gt; Field key for sorting by (or null for no sorting)</span>
      <span class="hljs-comment">// ctx.sortDesc ==&gt; true if sorting descending, false otherwise</span>
    }
  }
}</pre></figure>
<p>
  您也可以分别使用：<code translate="no" class="notranslate text-nowrap">:sort-by.sync</code>和 
  <code translate="no" class="notranslate text-nowrap">:sort-desc.sync</code>双向属性来获取当前的sortBy和sortDesc值
  （有关详细信息，请参见上面的<a href="#sorting" class="font-weight-bold">排序</a>部分）。
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span> <span class="hljs-attr">:sort-by.sync</span>=<span class="hljs-string">"mySortBy"</span> <span class="hljs-attr">:sort-desc.sync</span>=<span class="hljs-string">"mySortDesc"</span> <span class="hljs-attr">...</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="server-side-rendering" class="bv-no-focus-ring"><span class="bd-content-title">服务器端渲染<a class="anchorjs-link" href="#server-side-rendering" aria-labelledby="server-side-rendering"></a></span></h3>
<p>
  使用服务器端呈现（SSR）和<code translate="no" class="notranslate text-nowrap">项目</code>提供程序功能时，必须格外小心。 确保在获取数据时处理服务器端可能需要的任何特殊情况！
</p>
<p>
  在文档中装入<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>后，它将自动触发提供程序更新调用。
</p>
<h2 id="light-weight-tables" class="bv-no-focus-ring"><span class="bd-content-title">轻量级表格<a class="anchorjs-link" href="#light-weight-tables" aria-labelledby="light-weight-tables"></a></span></h2>
<p>
  如果只需要简单地显示表格数据，那么<code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code> 
  提供了一个很好的替代<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>的方法。
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>组件提供了
  <code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>的所有样式和格式设置功能（包括行详细信息和堆叠支持），但<strong>不包括</strong>以下功能：
</p>
<ul>
<li>筛选</li>
<li>Sorting</li>
<li>排序</li>
<li>项目提供者支持</li>
<li>可选行</li>
<li>繁忙的表格状态和样式</li>
<li>固定顶排和底排</li>
<li>空行支持</li>
</ul>
<h3 id="table-lite-as-a-plugin" class="bv-no-focus-ring"><span class="bd-content-title">表精简版作为插件<a class="anchorjs-link" href="#table-lite-as-a-plugin" aria-labelledby="table-lite-as-a-plugin"></a></span></h3>
<p>
  <code translate="no" class="notranslate text-nowrap">TablePlugin</code>包括<code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>。
  为了方便起见，BootstrapVue还提供了<code translate="no" class="notranslate text-nowrap">TableLitePlugin</code>，
  该表仅安装<code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>。<code translate="no" class="notranslate text-nowrap">TableLitePlugin</code>可以用作名为export的顶层。
</p>
<h2 id="simple-tables" class="bv-no-focus-ring"><span class="bd-content-title">简单表格<a class="anchorjs-link" href="#simple-tables" aria-labelledby="simple-tables"></a></span></h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>组件使用户可以完全控制表内容的呈现，
  同时提供基本的Bootstrap v4表样式。<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>是围绕
  <code translate="no" class="notranslate text-nowrap">&lt;table&gt;</code>元素的包装器组件。
  通过<code translate="no" class="notranslate text-nowrap">默认</code>插槽，
  可以在组件内部使用任何或所有BootstrapVue<a href="#table-helper-components" class="font-weight-bold">表格帮助器组件</a>：
  <code translate="no" class="notranslate text-nowrap">&lt;b-thead&gt;</code>, 
<code translate="no" class="notranslate text-nowrap">&lt;b-tfoot&gt;</code>, 
<code translate="no" class="notranslate text-nowrap">&lt;b-tbody&gt;</code>, 
<code translate="no" class="notranslate text-nowrap">&lt;b-tr&gt;</code>, 
<code translate="no" class="notranslate text-nowrap">&lt;b-th&gt;</code>,
 <code translate="no" class="notranslate text-nowrap">&lt;b-td&gt;</code>,和HTML5元素
 <code translate="no" class="notranslate text-nowrap">&lt;caption&gt;</code>, 
 <code translate="no" class="notranslate text-nowrap">&lt;colgroup&gt;</code>和
 <code translate="no" class="notranslate text-nowrap">&lt;col&gt;</code>。与组件名称相反，
 可以使用<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>创建简单或复杂的表布局。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>通过属性提供基本的样式选项：
  <code translate="no" class="notranslate text-nowrap">striped</code>, 
   <code translate="no" class="notranslate text-nowrap">bordered</code>,
    <code translate="no" class="notranslate text-nowrap">borderless</code>,
     <code translate="no" class="notranslate text-nowrap">outlined</code>, 
     <code translate="no" class="notranslate text-nowrap">small</code>, 
     <code translate="no" class="notranslate text-nowrap">hover</code>, 
     <code translate="no" class="notranslate text-nowrap">dark</code>,
      <code translate="no" class="notranslate text-nowrap">fixed</code>, 
      <code translate="no" class="notranslate text-nowrap">responsive</code>和
      <code translate="no" class="notranslate text-nowrap">sticky-header</code>。
       请注意，<code translate="no" class="notranslate text-nowrap">堆叠</code>模式可用，
       但是需要一些额外的标记来生成单元格标题，如下面的<a href="#simple-tables-and-stacked-mode" class="font-weight-bold">简单表格和堆叠模式</a>部分所述。
       还支持粘性列，但是还需要一些额外的标记来指定哪些列是粘性的。 有关使用<a href="#simple-tables-and-sticky-columns" class="font-weight-bold"> 粘性列</a>的更多信息，请参见下文。
</p>
<p>
  由于<code translate="no" class="notranslate text-nowrap">b-table-simple</code>只是一个包装器组件，您将需要在其中封装内容，
  因此它不提供<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>的任何高级功能（即行事件，头事件，排序，分页，过滤） ，脚步克隆，项目，字段等）。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-simple notranslate">
<div>
<div class="table-responsive">
<table role="table" class="table b-table table-hover table-sm b-table-caption-top" id="__BVID__1207">
<caption>
Items sold in August, grouped by Country and City:
</caption>
<colgroup>
<col>
<col>
</colgroup>
<colgroup>
<col>
<col>
<col>
</colgroup>
<colgroup>
<col>
<col>
</colgroup>
<thead role="rowgroup" class="thead-dark">
<tr role="row" class="">
<th colspan="2" role="columnheader" scope="colspan" class="">Region</th>
<th colspan="3" role="columnheader" scope="colspan" class="">Clothes</th>
<th colspan="2" role="columnheader" scope="colspan" class="">Accessories</th>
</tr>
<tr role="row" class="">
<th role="columnheader" scope="col" class="">Country</th>
<th role="columnheader" scope="col" class="">City</th>
<th role="columnheader" scope="col" class="">Trousers</th>
<th role="columnheader" scope="col" class="">Skirts</th>
<th role="columnheader" scope="col" class="">Dresses</th>
<th role="columnheader" scope="col" class="">Bracelets</th>
<th role="columnheader" scope="col" class="">Rings</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<th rowspan="3" role="rowheader" scope="rowgroup" class="">Belgium</th>
<th role="rowheader" scope="row" class="text-right">Antwerp</th>
<td role="cell" class="">56</td>
<td role="cell" class="">22</td>
<td role="cell" class="">43</td>
<td role="cell" class="table-success">72</td>
<td role="cell" class="">23</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" class="text-right">Gent</th>
<td role="cell" class="">46</td>
<td role="cell" class="table-warning">18</td>
<td role="cell" class="">50</td>
<td role="cell" class="">61</td>
<td role="cell" class="table-danger">15</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" class="text-right">Brussels</th>
<td role="cell" class="">51</td>
<td role="cell" class="">27</td>
<td role="cell" class="">38</td>
<td role="cell" class="">69</td>
<td role="cell" class="">28</td>
</tr>
<tr role="row" class="">
<th rowspan="2" role="rowheader" scope="rowgroup" class="">The Netherlands</th>
<th role="rowheader" scope="row" class="text-right">Amsterdam</th>
<td role="cell" class="table-success">89</td>
<td role="cell" class="">34</td>
<td role="cell" class="">69</td>
<td role="cell" class="">85</td>
<td role="cell" class="">38</td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" class="text-right">Utrecht</th>
<td role="cell" class="">80</td>
<td role="cell" class="table-danger">12</td>
<td role="cell" class="">43</td>
<td role="cell" class="">36</td>
<td role="cell" class="table-warning">19</td>
</tr>
</tbody>
<tfoot role="rowgroup" class="">
<tr role="row" class="">
<td colspan="7" role="columnheader" scope="colspan" class="text-right table-secondary"> Total Rows: <b>5</b></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-table-simple</span> <span class="hljs-attr">hover</span> <span class="hljs-attr">small</span> <span class="hljs-attr">caption-top</span> <span class="hljs-attr">responsive</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">caption</span>&gt;</span>Items sold in August, grouped by Country and City:<span class="hljs-tag">&lt;/<span class="hljs-name">caption</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-thead</span> <span class="hljs-attr">head-variant</span>=<span class="hljs-string">"dark"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"2"</span>&gt;</span>Region<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"3"</span>&gt;</span>Clothes<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"2"</span>&gt;</span>Accessories<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Country<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>City<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Trousers<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Skirts<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Dresses<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Bracelets<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Rings<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-thead</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tbody</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">"3"</span>&gt;</span>Belgium<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span>Antwerp<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>56<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>22<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>43<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>72<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>23<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span>Gent<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>46<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span>&gt;</span>18<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>50<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>61<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>15<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span>Brussels<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>51<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>27<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>38<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>69<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>28<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">"2"</span>&gt;</span>The Netherlands<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span>Amsterdam<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>89<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>34<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>69<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>85<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>38<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span>Utrecht<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>80<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>12<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>43<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>36<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span>&gt;</span>19<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tbody</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tfoot</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"7"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"secondary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span>
          Total Rows: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tfoot</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-table-simple</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  在<code translate="no" class="notranslate text-nowrap">响应式</code>或<code translate="no" class="notranslate text-nowrap">粘滞标题</code>模式下，
  <code translate="no" class="notranslate text-nowrap">&lt;table&gt;</code>元素被包装在<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>元素内。
  如果您需要将其他类应用于<code translate="no" class="notranslate text-nowrap">&lt;table&gt;</code>元素，请使用<code translate="no" class="notranslate text-nowrap">table-classes</code>属性。
</p>
<p>
  赋予<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>的任何其他属性将始终应用于<code translate="no" class="notranslate text-nowrap">&lt;table&gt;</code>元素。
</p>
<h3 id="simple-tables-and-stacked-mode" class="bv-no-focus-ring"><span class="bd-content-title">简单表格和堆叠模式<a class="anchorjs-link" href="#simple-tables-and-stacked-mode" aria-labelledby="simple-tables-and-stacked-mode"></a></span></h3>
<p>
  当表处于堆叠模式时，<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>主体单元格上需要一些附加标记。
  具体来说，BootstrapVue使用特殊的数据属性来创建单元格的标题，您可以通过 <code translate="no" class="notranslate text-nowrap">堆栈标题</code>属性将其提供给<code translate="no" class="notranslate text-nowrap">&lt;b-td&gt;</code>或 
  <code translate="no" class="notranslate text-nowrap">&lt;b-th&gt;</code>。
  仅支持纯字符串（不支持HTML标记），因为我们使用伪元素:: <code translate="no" class="notranslate text-nowrap">::before</code> 和 css 
  <code translate="no" class="notranslate text-nowrap">content</code>属性。
</p>
<p>这是与上述相同的表，设置为始终堆叠，具有额外的标记要处理堆叠模式（专门用于生成单元格标题）：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-table-simple-stacked notranslate">
<div>
<table role="table" class="table b-table table-hover table-sm b-table-caption-top b-table-stacked" id="__BVID__1263">
<caption>
Items sold in August, grouped by Country and City:
</caption>
<colgroup>
<col>
<col>
</colgroup>
<colgroup>
<col>
<col>
<col>
</colgroup>
<colgroup>
<col>
<col>
</colgroup>
<thead role="rowgroup" class="thead-dark">
<tr role="row" class="">
<th colspan="2" role="columnheader" scope="colspan" class="">Region</th>
<th colspan="3" role="columnheader" scope="colspan" class="">Clothes</th>
<th colspan="2" role="columnheader" scope="colspan" class="">Accessories</th>
</tr>
<tr role="row" class="">
<th role="columnheader" scope="col" class="">Country</th>
<th role="columnheader" scope="col" class="">City</th>
<th role="columnheader" scope="col" class="">Trousers</th>
<th role="columnheader" scope="col" class="">Skirts</th>
<th role="columnheader" scope="col" class="">Dresses</th>
<th role="columnheader" scope="col" class="">Bracelets</th>
<th role="columnheader" scope="col" class="">Rings</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<th rowspan="3" role="rowheader" scope="rowgroup" class="text-center"><div>Belgium (3 Cities)</div></th>
<th role="rowheader" scope="row" data-label="City" class="text-left"><div>Antwerp</div></th>
<td role="cell" data-label="Clothes: Trousers" class=""><div>56</div></td>
<td role="cell" data-label="Clothes: Skirts" class=""><div>22</div></td>
<td role="cell" data-label="Clothes: Dresses" class=""><div>43</div></td>
<td role="cell" data-label="Accessories: Bracelets" class="table-success"><div>72</div></td>
<td role="cell" data-label="Accessories: Rings" class=""><div>23</div></td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" data-label="City" class=""><div>Gent</div></th>
<td role="cell" data-label="Clothes: Trousers" class=""><div>46</div></td>
<td role="cell" data-label="Clothes: Skirts" class="table-warning"><div>18</div></td>
<td role="cell" data-label="Clothes: Dresses" class=""><div>50</div></td>
<td role="cell" data-label="Accessories: Bracelets" class=""><div>61</div></td>
<td role="cell" data-label="Accessories: Rings" class="table-danger"><div>15</div></td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" data-label="City" class=""><div>Brussels</div></th>
<td role="cell" data-label="Clothes: Trousers" class=""><div>51</div></td>
<td role="cell" data-label="Clothes: Skirts" class=""><div>27</div></td>
<td role="cell" data-label="Clothes: Dresses" class=""><div>38</div></td>
<td role="cell" data-label="Accessories: Bracelets" class=""><div>69</div></td>
<td role="cell" data-label="Accessories: Rings" class=""><div>28</div></td>
</tr>
<tr role="row" class="">
<th rowspan="2" role="rowheader" scope="rowgroup" class="text-center"><div>The Netherlands (2 Cities)</div></th>
<th role="rowheader" scope="row" data-label="City" class=""><div>Amsterdam</div></th>
<td role="cell" data-label="Clothes: Trousers" class="table-success"><div>89</div></td>
<td role="cell" data-label="Clothes: Skirts" class=""><div>34</div></td>
<td role="cell" data-label="Clothes: Dresses" class=""><div>69</div></td>
<td role="cell" data-label="Accessories: Bracelets" class=""><div>85</div></td>
<td role="cell" data-label="Accessories: Rings" class=""><div>38</div></td>
</tr>
<tr role="row" class="">
<th role="rowheader" scope="row" data-label="City" class=""><div>Utrecht</div></th>
<td role="cell" data-label="Clothes: Trousers" class=""><div>80</div></td>
<td role="cell" data-label="Clothes: Skirts" class="table-danger"><div>12</div></td>
<td role="cell" data-label="Clothes: Dresses" class=""><div>43</div></td>
<td role="cell" data-label="Accessories: Bracelets" class=""><div>36</div></td>
<td role="cell" data-label="Accessories: Rings" class="table-warning"><div>19</div></td>
</tr>
</tbody>
<tfoot role="rowgroup" class="">
<tr role="row" class="">
<td colspan="7" role="columnheader" scope="colspan" class="text-right table-secondary"> Total Rows: <b>5</b></td>
</tr>
</tfoot>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-table-simple</span> <span class="hljs-attr">hover</span> <span class="hljs-attr">small</span> <span class="hljs-attr">caption-top</span> <span class="hljs-attr">stacked</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">caption</span>&gt;</span>Items sold in August, grouped by Country and City:<span class="hljs-tag">&lt;/<span class="hljs-name">caption</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">colgroup</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">col</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">colgroup</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-thead</span> <span class="hljs-attr">head-variant</span>=<span class="hljs-string">"dark"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"2"</span>&gt;</span>Region<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"3"</span>&gt;</span>Clothes<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"2"</span>&gt;</span>Accessories<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Country<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>City<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Trousers<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Skirts<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Dresses<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Bracelets<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Rings<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-thead</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tbody</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>Belgium (3 Cities)<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"City"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-left"</span>&gt;</span>Antwerp<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Trousers"</span>&gt;</span>56<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Skirts"</span>&gt;</span>22<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Dresses"</span>&gt;</span>43<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Bracelets"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>72<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Rings"</span>&gt;</span>23<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"City"</span>&gt;</span>Gent<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Trousers"</span>&gt;</span>46<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Skirts"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span>&gt;</span>18<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Dresses"</span>&gt;</span>50<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Bracelets"</span>&gt;</span>61<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Rings"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>15<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"City"</span>&gt;</span>Brussels<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Trousers"</span>&gt;</span>51<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Skirts"</span>&gt;</span>27<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Dresses"</span>&gt;</span>38<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Bracelets"</span>&gt;</span>69<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Rings"</span>&gt;</span>28<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>The Netherlands (2 Cities)<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"City"</span>&gt;</span>Amsterdam<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Trousers"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>89<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Skirts"</span>&gt;</span>34<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Dresses"</span>&gt;</span>69<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Bracelets"</span>&gt;</span>85<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Rings"</span>&gt;</span>38<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"City"</span>&gt;</span>Utrecht<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Trousers"</span>&gt;</span>80<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Skirts"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>12<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Clothes: Dresses"</span>&gt;</span>43<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Bracelets"</span>&gt;</span>36<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">stacked-heading</span>=<span class="hljs-string">"Accessories: Rings"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span>&gt;</span>19<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tbody</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tfoot</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"7"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"secondary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span>
          Total Rows: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tfoot</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-table-simple</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  像 <code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>和
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>一样，
  在可视地堆叠表格时，可视地隐藏了表头（<thead>）和页脚（<tfoot>）。 如果需要页眉或页脚，可以通过在<code translate="no" class="notranslate text-nowrap">&lt;b-tbody&gt;</code>组件内部
    （或在第二个<code translate="no" class="notranslate text-nowrap">&lt;b-tbody&gt;</code>组件中）创建一个额外的<code translate="no" class="notranslate text-nowrap">&lt;b-tr&gt;</code>
    并将其设置为<code translate="no" class="notranslate text-nowrap">columnheader</code>子<code translate="no" class="notranslate text-nowrap">&lt;b-th&gt;</code>单元格，
    并使用Bootstrap v4<a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">响应式显示实用程序类</a>在表不再以视觉方式堆叠时（该断点应与堆叠的表匹配），
    将某个特定断点上方的多余行（或<code translate="no" class="notranslate text-nowrap">&lt;b-tbody&gt;</code>）隐藏起来 您已设置的断点），
    即<code translate="no" class="notranslate text-nowrap">&lt;b-tr class="d-md-none"&gt;</code>会在中等和较宽的屏幕上隐藏该行，
    而<code translate="no" class="notranslate text-nowrap">&lt;b-tbody class="d-md-none"&gt;</code>会将该行隐藏 在中型和大型屏幕上分组。
</p>
<p><strong>注意事项:</strong> 
  
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code> 的堆栈模式要求您使用BootstrapVue<a href="#table-helper-components" class="font-weight-bold">表格帮助器组件</a>。
  常规 <code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;tr&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;td&gt;</code>和<code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>>元素标签的使用将无法按预期方式工作，
  也不会自动应用任何必需的可访问性属性。
</p>
<h3 id="simple-tables-and-sticky-columns" class="bv-no-focus-ring"><span class="bd-content-title">简单表格和粘性列<a class="anchorjs-link" href="#simple-tables-and-sticky-columns" aria-labelledby="simple-tables-and-sticky-columns"></a></span></h3>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>支持粘性列，
  但是您将需要在要<code translate="no" class="notranslate text-nowrap">粘性列</code>中的每个表单元格
  （<code translate="no" class="notranslate text-nowrap">thead</code>, 
  <code translate="no" class="notranslate text-nowrap">tbody</code>,和
  <code translate="no" class="notranslate text-nowrap">tfoot</code>行组中）上设置粘性列支持。 例如：
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-table-simple</span> <span class="hljs-attr">responsive</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-thead</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">sticky-column</span>&gt;</span>Sticky Column Header<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Heading 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Heading 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Heading 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Heading 4<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-thead</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tbody</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">sticky-column</span>&gt;</span>Sticky Column Row Header<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>Cell<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>Cell<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>Cell<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>Cell<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">sticky-column</span>&gt;</span>Sticky Column Row Header<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>Cell<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>Cell<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>Cell<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-td</span>&gt;</span>Cell<span class="hljs-tag">&lt;/<span class="hljs-name">b-td</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tbody</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tfoot</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tr</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span> <span class="hljs-attr">sticky-column</span>&gt;</span>Sticky Column Footer<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Heading 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Heading 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Heading 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-th</span>&gt;</span>Heading 4<span class="hljs-tag">&lt;/<span class="hljs-name">b-th</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tr</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tfoot</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-table-responsive</span>&gt;</span></pre></figure>
<p>
  与<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>和
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>一样，
  当将 <code translate="no" class="notranslate text-nowrap">堆叠</code>属性设置在<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>上时，不支持粘性列。
</p>
<h3 id="table-simple-as-a-plugin" class="bv-no-focus-ring"><span class="bd-content-title">表格简单易用<a class="anchorjs-link" href="#table-simple-as-a-plugin" aria-labelledby="table-simple-as-a-plugin"></a></span></h3>
<p>
  <code translate="no" class="notranslate text-nowrap">TablePlugin</code>包括<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>和所有帮助程序组件。
  为了方便起见，BootstrapVue还提供了<code translate="no" class="notranslate text-nowrap">TableSimplePlugin</code>，
  该表可安装<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>和所有帮助程序组件。
  <code translate="no" class="notranslate text-nowrap">TableSimplePlugin</code>可以用作名为export的顶层。
</p>
<h2 id="table-helper-components" class="bv-no-focus-ring"><span class="bd-content-title">表格助手组件<a class="anchorjs-link" href="#table-helper-components" aria-labelledby="table-helper-components"></a></span></h2>
<p>
  当使用<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>或命名槽
  <code translate="no" class="notranslate text-nowrap">top-row</code>, 
<code translate="no" class="notranslate text-nowrap">bottom-row</code>, 
<code translate="no" class="notranslate text-nowrap">thead-top</code>,和
<code translate="no" class="notranslate text-nowrap">custom-foot</code>（所有这些都接受表子元素）时，BootstrapVue提供了其他辅助子组件。 帮助器组件如下：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">b-tbody</code> (<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code> only)</li>
<li><code translate="no" class="notranslate text-nowrap">b-thead</code> (<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code> only)</li>
<li><code translate="no" class="notranslate text-nowrap">b-tfoot</code> (<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code> only)</li>
<li><code translate="no" class="notranslate text-nowrap">b-tr</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-td</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-th</code></li>
</ul>
<p>
  这些组件经过优化，可以处理将变体转换为适当的类（例如处理表格<code translate="no" class="notranslate text-nowrap">暗</code>模式），
  并自动应用某些辅助功能属性（即<code translate="no" class="notranslate text-nowrap">角色</code>和
  <code translate="no" class="notranslate text-nowrap">作用域</code>）。
  他们还可以生成堆积表以及粘性标题和列，标记。组件<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>和
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>在内部使用这些帮助程序组件。
</p>
<p>
  在<a href="#simple-tables" class="font-weight-bold">简单表</a>示例中，
  我们使用帮助器组件<code translate="no" class="notranslate text-nowrap">&lt;b-thead&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-tbody&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-tr&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-th&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-tr&gt;</code>和 
  <code translate="no" class="notranslate text-nowrap">&lt;b-tfoot&gt;</code>。
  虽然您可以在<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>中使用常规表子元素
  （即<code translate="no" class="notranslate text-nowrap">&lt;tbody&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;tr&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;td&gt;</code>等），
  并在<code translate="no" class="notranslate text-nowrap">顶部行</code>，<code translate="no" class="notranslate text-nowrap">底部行</code>和
  <code translate="no" class="notranslate text-nowrap">thead-top</code>中使用命名的插槽，
  建议使用这些BootstrapVue表<code translate="no" class="notranslate text-nowrap">&lt;b-t*&gt;</code>帮助器组件。
  请注意，没有<code translate="no" class="notranslate text-nowrap">&lt;caption&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;colgroup&gt;</code>或 
  <code translate="no" class="notranslate text-nowrap">&lt;col&gt;</code>的帮助器组件，因此您可以直接在<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>中使用这三个HTML5元素。
</p>
<ul>
<li>
  表格助手组件<code translate="no" class="notranslate text-nowrap">&lt;b-tr&gt;</code>,
  <code translate="no" class="notranslate text-nowrap">&lt;b-td&gt;</code>和 
  <code translate="no" class="notranslate text-nowrap">&lt;b-th&gt;</code>都接受<code translate="no" class="notranslate text-nowrap">variant</code>属性，
  它将应用Bootstrap主题颜色之一（通过<a href="../../../bootstrap-vue/docs/reference/theming" class="font-weight-bold">主题化</a>支持自定义主题颜色），
  并将自动调整为 根据表格的<code translate="no" class="notranslate text-nowrap">暗</code>模式使用正确的变体类。
</li>
<li>
  辅助组件<code translate="no" class="notranslate text-nowrap">&lt;b-thead&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-tfoot&gt;</code>分别接受<code translate="no" class="notranslate text-nowrap">head-variant</code>和
  <code translate="no" class="notranslate text-nowrap">foot-variant</code>属性。
  支持的值是<code translate="no" class="notranslate text-nowrap">'dark'</code>, 
  <code translate="no" class="notranslate text-nowrap">'light'</code>或
  <code translate="no" class="notranslate text-nowrap">null</code> (
    <code translate="no" class="notranslate text-nowrap">null</code>使用默认的表格背景）。
    这些变体还控制文本颜色（<code translate="no" class="notranslate text-nowrap">“深色”</code>变体为浅色文本，
    <code translate="no" class="notranslate text-nowrap">“浅色”</code>变体为深色文本）。
</li>
<li>
  可访问性属性的<code translate="no" class="notranslate text-nowrap">角色</code>和 
  <code translate="no" class="notranslate text-nowrap">作用域</code>会根据其位置
  （thead，tbody或tfoot）及其<code translate="no" class="notranslate text-nowrap">行距</code>或
  <code translate="no" class="notranslate text-nowrap">colspan</code>属性在
  <code translate="no" class="notranslate text-nowrap">&lt;b-th&gt;</code>和
    <code translate="no" class="notranslate text-nowrap">&lt;b-td&gt;</code>组件上自动设置。
    您可以通过在帮助程序组件上设置适当的属性来覆盖自动 <code translate="no" class="notranslate text-nowrap">作用域</code>和
    <code translate="no" class="notranslate text-nowrap">角色</code>值。
</li>
<li>
  对于<code translate="no" class="notranslate text-nowrap">&lt;b-tbody&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-thead&gt;</code>,和
   <code translate="no" class="notranslate text-nowrap">&lt;b-tfoot&gt;</code> 帮助器组件，
   将应用适当的默认<code translate="no" class="notranslate text-nowrap">'rowgroup'</code>，除非您通过提供<code translate="no" class="notranslate text-nowrap">角色</code>属性来
   覆盖<code translate="no" class="notranslate text-nowrap">角色</code>。
</li>
<li>
  对于<code translate="no" class="notranslate text-nowrap">&lt;b-tr&gt;</code>帮助器组件，除非您通过提供<code translate="no" class="notranslate text-nowrap">角色</code>属性来覆盖
  <code translate="no" class="notranslate text-nowrap">角色</code>，否则将应用适当的默认角色<code translate="no" class="notranslate text-nowrap">“行”</code>。
  <code translate="no" class="notranslate text-nowrap">&lt;b-tr&gt;</code>不添加<code translate="no" class="notranslate text-nowrap">范围</code>。
</li>
<li>
  当使用<code translate="no" class="notranslate text-nowrap">tbody-transition-props</code>和
  <code translate="no" class="notranslate text-nowrap">tbody-transition-handlers</code>属性中的一个或两个时，
  <code translate="no" class="notranslate text-nowrap">&lt;b-tbody&gt;</code>元素支持渲染Vue<code translate="no" class="notranslate text-nowrap">&lt;transition-group&gt;</code> 。
  有关更多详细信息，请参见 <a href="#table-body-transition-support" class="font-weight-bold">表格内容过渡支持</a> 部分。
</li>
</ul>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">辅助功能<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>
  当使用特定功能时，<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>和
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>组件将尝试提供可能的最佳可访问性标记。
</p>
<p>
  在辅助表组件中使用<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>时，元素将默认应用适当的角色，您可以选择覆盖这些角色。
  在<code translate="no" class="notranslate text-nowrap">&lt;b-table-simple&gt;</code>帮助器组件上使用单击处理程序时，将需要应用适当的<code translate="no" class="notranslate text-nowrap">aria-*</code>属性，
  并设置<code translate="no" class="notranslate text-nowrap">tabindex="0"</code>以使屏幕阅读器和纯键盘用户可以访问该单击操作。 您还应该收听<code translate="no" class="notranslate text-nowrap">@keydown.enter。
    阻止</code>用户按<kbd class="notranslate" translate="no">ENTER</kbd>触发您单击单元格或行（仅键盘用户可访问性要求）。
</p>
<h3 id="heading-accessibility" class="bv-no-focus-ring"><span class="bd-content-title">标题可访问性<a class="anchorjs-link" href="#heading-accessibility" aria-labelledby="heading-accessibility"></a></span></h3>
<p>
  当列（字段）是可排序的（仅<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>）
  或注册了单击鼠标左键的侦听器（<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>和<code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>）时，
    页眉（和页脚） <code translate="no" class="notranslate text-nowrap">&lt;th&gt;</code>单元格将放置在文档选项卡序列中
    （通过<code translate="no" class="notranslate text-nowrap">tabindex="0"</code>），以供纯键盘和屏幕阅读器用户访问，以便用户可以触发单击（通过在标题单元格上按<kbd class="notranslate" translate="no">ENTER</kbd>键）。
</p>
<h3 id="data-row-accessibility" class="bv-no-focus-ring"><span class="bd-content-title">数据行可访问性<a class="anchorjs-link" href="#data-row-accessibility" aria-labelledby="data-row-accessibility"></a></span></h3>
<p>
  当表处于<code translate="no" class="notranslate text-nowrap">可选</code>模式（仅<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>，
    并且未设置属性 <code translate="no" class="notranslate text-nowrap">no-select-on-click</code>）时，
    或者如果注册了<code translate="no" class="notranslate text-nowrap">行单击</code>事件监听器（<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>和
    <code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>），
    所有数据项行（<code translate="no" class="notranslate text-nowrap">&lt;tr&gt;</code>元素）
    都将放入文档选项卡序列中（通过<code translate="no" class="notranslate text-nowrap">tabindex="0"</code>），以使纯键盘和屏幕阅读器用户可以通过按<kbd class="notranslate" translate="no">ENTER</kbd>
    键来单击行或<kbd class="notranslate" translate="no">SPACE</kbd>。
</p>
<p>
  将表项目行按文档选项卡顺序放置（<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>和
  <code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>）时，它们在集中时也将支持基本的键盘导航：
</p>
<ul>
<li><kbd class="notranslate" translate="no">DOWN</kbd> 将移至下一行</li>
<li><kbd class="notranslate" translate="no">UP</kbd> 将移至上一行</li>
<li><kbd class="notranslate" translate="no">END</kbd> or <kbd class="notranslate" translate="no">DOWN</kbd>+<kbd class="notranslate" translate="no">SHIFT</kbd> 将移至最后一行</li>
<li><kbd class="notranslate" translate="no">HOME</kbd> or <kbd class="notranslate" translate="no">UP</kbd>+<kbd class="notranslate" translate="no">SHIFT</kbd>将移至第一行</li>
<li><kbd class="notranslate" translate="no">ENTER</kbd> or <kbd class="notranslate" translate="no">SPACE</kbd> 单击该行。</li>
</ul>
<h3 id="row-event-accessibility" class="bv-no-focus-ring"><span class="bd-content-title">行事件可访问性<a class="anchorjs-link" href="#row-event-accessibility" aria-labelledby="row-event-accessibility"></a></span></h3>
<p>
  请注意，以下基于行的事件/操作（可用于<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>
  和<code translate="no" class="notranslate text-nowrap">&lt;b-table-lite&gt;</code>）被认为是不可访问的，并且仅应在功能不重要或可以通过其他方式提供的情况下使用：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">row-dblclicked</code></li>
<li><code translate="no" class="notranslate text-nowrap">row-contextmenu</code></li>
<li><code translate="no" class="notranslate text-nowrap">row-hovered</code></li>
<li><code translate="no" class="notranslate text-nowrap">row-unhovered</code></li>
<li><code translate="no" class="notranslate text-nowrap">row-middle-clicked</code></li>
</ul>
<p>
  请注意，并非所有浏览器（即IE，Safari和大多数移动浏览器）都支持<code translate="no" class="notranslate text-nowrap">行单击中间事件</code>。
  当侦听源自不支持输入或导航的元素的<code translate="no" class="notranslate text-nowrap">行单击中间事件</code>时，
  您通常会希望明确阻止其他默认操作映射到鼠标中键的向下操作。 在Windows上通常是自动滚动，在macOS和Linux上通常是剪贴板粘贴。 这可以通过防止<code translate="no" class="notranslate text-nowrap">mousedown</code>或
  <code translate="no" class="notranslate text-nowrap">pointerdown</code>事件的默认行为来完成。
</p>
<p>
  此外，您可能需要避免在右键单击后打开默认系统或浏览器上下文菜单。 由于操作系统之间的时间差异，这也不是<code translate="no" class="notranslate text-nowrap">行中间单击</code>可预防的默认行为。
  而是可以通过防止<code translate="no" class="notranslate text-nowrap">row-contextmenu</code>事件的默认行为来完成此操作。
</p>
<p>建议您在尽可能多的浏览器和设备变体中测试您的应用，以确保您的应用能够处理各种与事件不一致的情况。</p>
<h2 id="complete-example" class="bv-no-focus-ring"><span class="bd-content-title">完整的例子<a class="anchorjs-link" href="#complete-example" aria-labelledby="complete-example"></a></span></h2>
<div translate="translate" class="bd-example vue-example vue-example-b-table-complete notranslate">
<div class="container-fluid">
<div class="row">
<div class="my-1 col-lg-6">
<div role="group" class="form-row form-group mb-0" id="__BVID__1319">
<label for="sortBySelect" class="col-sm-3 col-form-label col-form-label-sm text-sm-right" id="__BVID__1319__BV_label_">Sort</label>
<div class="bv-no-focus-ring col">
<div role="group" class="input-group input-group-sm">
<select id="sortBySelect" class="w-75 custom-select">
<option value="">-- none --</option>
<option value="name">Person Full name</option>
<option value="age">Person age</option>
<option value="isActive">is Active</option>
</select>
<select disabled="disabled" class="w-25 custom-select custom-select-sm" id="__BVID__1321">
<option value="false">Asc</option>
<option value="true">Desc</option>
</select>
</div>
</div>
</div>
</div>
<div class="my-1 col-lg-6">
<div role="group" class="form-row form-group mb-0" id="__BVID__1322">
<label for="initialSortSelect" class="col-sm-3 col-form-label col-form-label-sm text-sm-right" id="__BVID__1322__BV_label_">Initial sort</label>
<div class="bv-no-focus-ring col">
<select id="initialSortSelect" class="custom-select custom-select-sm">
<option value="asc">asc</option>
<option value="desc">desc</option>
<option value="last">last</option>
</select>
</div>
</div>
</div>
<div class="my-1 col-lg-6">
<div role="group" class="form-row form-group mb-0" id="__BVID__1324">
<label for="filterInput" class="col-sm-3 col-form-label col-form-label-sm text-sm-right" id="__BVID__1324__BV_label_">Filter</label>
<div class="bv-no-focus-ring col">
<div role="group" class="input-group input-group-sm">
<input id="filterInput" type="search" placeholder="Type to Search" class="form-control">
<div class="input-group-append">
<button type="button" disabled="disabled" class="btn btn-secondary disabled">Clear</button>
</div>
</div>
</div>
</div>
</div>
<div class="my-1 col-lg-6">
<fieldset class="form-group mb-0" id="__BVID__1326" aria-labelledby="__BVID__1326__BV_label_" aria-describedby="__BVID__1326__BV_description_">
<div class="form-row">
<legend tabindex="-1" class="col-sm-3 bv-no-focus-ring col-form-label col-form-label-sm text-sm-right" id="__BVID__1326__BV_label_">Filter On</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring col">
<div role="group" tabindex="-1" class="mt-1 bv-no-focus-ring" id="__BVID__1327">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="name" id="__BVID__1328" name="__BVID__1327">
<label class="custom-control-label" for="__BVID__1328">Name</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="age" id="__BVID__1329" name="__BVID__1327">
<label class="custom-control-label" for="__BVID__1329">Age</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="isActive" id="__BVID__1330" name="__BVID__1327">
<label class="custom-control-label" for="__BVID__1330">Active</label>
</div>
</div>
<small tabindex="-1" class="form-text text-muted" id="__BVID__1326__BV_description_">Leave all unchecked to filter on all data</small></div>
</div>
</fieldset>
</div>
<div class="my-1 col-sm-5 col-md-6">
<div role="group" class="form-row form-group mb-0" id="__BVID__1331">
<label for="perPageSelect" class="col-sm-6 col-md-4 col-lg-3 col-form-label col-form-label-sm text-sm-right" id="__BVID__1331__BV_label_">Per page</label>
<div class="bv-no-focus-ring col">
<select id="perPageSelect" class="custom-select custom-select-sm">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
</div>
</div>
<div class="my-1 col-sm-7 col-md-6">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination my-0 b-pagination pagination-sm text-center">
<li role="presentation" aria-hidden="true" class="page-item disabled flex-fill"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled flex-fill"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item active flex-fill"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="true" aria-posinset="1" aria-setsize="3" tabindex="0" target="_self" href="#" class="page-link">1</a></li>
<li role="presentation" class="page-item flex-fill"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="3" tabindex="-1" target="_self" href="#" class="page-link">2</a></li>
<li role="presentation" class="page-item flex-fill"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="3" tabindex="-1" target="_self" href="#" class="page-link">3</a></li>
<li role="presentation" class="page-item flex-fill"><a role="menuitem" tabindex="-1" aria-label="Go to next page" target="_self" href="#" class="page-link">›</a></li>
<li role="presentation" class="page-item flex-fill"><a role="menuitem" tabindex="-1" aria-label="Go to last page" target="_self" href="#" class="page-link">»</a></li>
</ul>
</div>
</div>
<table aria-rowcount="12" role="table" aria-busy="false" aria-colcount="4" class="table b-table table-sm b-table-stacked-md" id="__BVID__1335" aria-describedby="__BVID__1335__caption_">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="">Person Full name<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" aria-sort="none" class="text-center">Person age<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" aria-sort="none" class="">is Active<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">Actions</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" aria-rowindex="1" class="">
<td aria-colindex="1" data-label="Person Full name" role="cell" class=""><div> Dickerson Macdonald </div></td>
<td aria-colindex="2" data-label="Person age" role="cell" class="text-center"><div>40</div></td>
<td aria-colindex="3" data-label="is Active" role="cell" class=""><div>Yes</div></td>
<td aria-colindex="4" data-label="Actions" role="cell" class=""><div>
<button type="button" class="btn mr-1 btn-secondary btn-sm"> Info modal </button>
<button type="button" class="btn btn-secondary btn-sm"> Show Details </button>
</div></td>
</tr>
<tr role="row" aria-rowindex="2" class="">
<td aria-colindex="1" data-label="Person Full name" role="cell" class=""><div> Larsen Shaw </div></td>
<td aria-colindex="2" data-label="Person age" role="cell" class="text-center"><div>21</div></td>
<td aria-colindex="3" data-label="is Active" role="cell" class=""><div>No</div></td>
<td aria-colindex="4" data-label="Actions" role="cell" class=""><div>
<button type="button" class="btn mr-1 btn-secondary btn-sm"> Info modal </button>
<button type="button" class="btn btn-secondary btn-sm"> Show Details </button>
</div></td>
</tr>
<tr role="row" aria-rowindex="3" class="table-success">
<td aria-colindex="1" data-label="Person Full name" role="cell" class=""><div> Mini Navarro </div></td>
<td aria-colindex="2" data-label="Person age" role="cell" class="text-center"><div>9</div></td>
<td aria-colindex="3" data-label="is Active" role="cell" class=""><div>No</div></td>
<td aria-colindex="4" data-label="Actions" role="cell" class=""><div>
<button type="button" class="btn mr-1 btn-secondary btn-sm"> Info modal </button>
<button type="button" class="btn btn-secondary btn-sm"> Show Details </button>
</div></td>
</tr>
<tr role="row" aria-rowindex="4" class="">
<td aria-colindex="1" data-label="Person Full name" role="cell" class=""><div> Geneva Wilson </div></td>
<td aria-colindex="2" data-label="Person age" role="cell" class="text-center"><div>89</div></td>
<td aria-colindex="3" data-label="is Active" role="cell" class=""><div>No</div></td>
<td aria-colindex="4" data-label="Actions" role="cell" class=""><div>
<button type="button" class="btn mr-1 btn-secondary btn-sm"> Info modal </button>
<button type="button" class="btn btn-secondary btn-sm"> Show Details </button>
</div></td>
</tr>
<tr role="row" aria-rowindex="5" class="">
<td aria-colindex="1" data-label="Person Full name" role="cell" class=""><div> Jami Carney </div></td>
<td aria-colindex="2" data-label="Person age" role="cell" class="text-center"><div>38</div></td>
<td aria-colindex="3" data-label="is Active" role="cell" class=""><div>Yes</div></td>
<td aria-colindex="4" data-label="Actions" role="cell" class=""><div>
<button type="button" class="btn mr-1 btn-secondary btn-sm"> Info modal </button>
<button type="button" class="btn btn-secondary btn-sm"> Show Details </button>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- User Interface controls --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">"Sort"</span>
          <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
          <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
          <span class="hljs-attr">label-size</span>=<span class="hljs-string">"sm"</span>
          <span class="hljs-attr">label-for</span>=<span class="hljs-string">"sortBySelect"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
        &gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"sortBy"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortBySelect"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"sortOptions"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w-75"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:first</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span>&gt;</span>-- none --<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
              <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"sortDesc"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"!sortBy"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w-25"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"false"</span>&gt;</span>Asc<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"true"</span>&gt;</span>Desc<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">"Initial sort"</span>
          <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
          <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
          <span class="hljs-attr">label-size</span>=<span class="hljs-string">"sm"</span>
          <span class="hljs-attr">label-for</span>=<span class="hljs-string">"initialSortSelect"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
        &gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
            <span class="hljs-attr">v-model</span>=<span class="hljs-string">"sortDirection"</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"initialSortSelect"</span>
            <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
            <span class="hljs-attr">:options</span>=<span class="hljs-string">"['asc', 'desc', 'last']"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">"Filter"</span>
          <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
          <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
          <span class="hljs-attr">label-size</span>=<span class="hljs-string">"sm"</span>
          <span class="hljs-attr">label-for</span>=<span class="hljs-string">"filterInput"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
        &gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
              <span class="hljs-attr">v-model</span>=<span class="hljs-string">"filter"</span>
              <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span>
              <span class="hljs-attr">id</span>=<span class="hljs-string">"filterInput"</span>
              <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Type to Search"</span>
            &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group-append</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"!filter"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"filter = ''"</span>&gt;</span>Clear<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group-append</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">"Filter On"</span>
          <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
          <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
          <span class="hljs-attr">label-size</span>=<span class="hljs-string">"sm"</span>
          <span class="hljs-attr">description</span>=<span class="hljs-string">"Leave all unchecked to filter on all data"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"filterOn"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-1"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"name"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"age"</span>&gt;</span>Age<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"isActive"</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">"Per page"</span>
          <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"6"</span>
          <span class="hljs-attr">label-cols-md</span>=<span class="hljs-string">"4"</span>
          <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"3"</span>
          <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
          <span class="hljs-attr">label-size</span>=<span class="hljs-string">"sm"</span>
          <span class="hljs-attr">label-for</span>=<span class="hljs-string">"perPageSelect"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
        &gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
            <span class="hljs-attr">v-model</span>=<span class="hljs-string">"perPage"</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"perPageSelect"</span>
            <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
            <span class="hljs-attr">:options</span>=<span class="hljs-string">"pageOptions"</span>
          &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"7"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination</span>
          <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentPage"</span>
          <span class="hljs-attr">:total-rows</span>=<span class="hljs-string">"totalRows"</span>
          <span class="hljs-attr">:per-page</span>=<span class="hljs-string">"perPage"</span>
          <span class="hljs-attr">align</span>=<span class="hljs-string">"fill"</span>
          <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"my-0"</span>
        &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- Main table element --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-table</span>
      <span class="hljs-attr">show-empty</span>
      <span class="hljs-attr">small</span>
      <span class="hljs-attr">stacked</span>=<span class="hljs-string">"md"</span>
      <span class="hljs-attr">:items</span>=<span class="hljs-string">"items"</span>
      <span class="hljs-attr">:fields</span>=<span class="hljs-string">"fields"</span>
      <span class="hljs-attr">:current-page</span>=<span class="hljs-string">"currentPage"</span>
      <span class="hljs-attr">:per-page</span>=<span class="hljs-string">"perPage"</span>
      <span class="hljs-attr">:filter</span>=<span class="hljs-string">"filter"</span>
      <span class="hljs-attr">:filterIncludedFields</span>=<span class="hljs-string">"filterOn"</span>
      <span class="hljs-attr">:sort-by.sync</span>=<span class="hljs-string">"sortBy"</span>
      <span class="hljs-attr">:sort-desc.sync</span>=<span class="hljs-string">"sortDesc"</span>
      <span class="hljs-attr">:sort-direction</span>=<span class="hljs-string">"sortDirection"</span>
      @<span class="hljs-attr">filtered</span>=<span class="hljs-string">"onFiltered"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">name</span>)=<span class="hljs-string">"row"</span>&gt;</span>
        {{ row.value.first }} {{ row.value.last }}
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:cell</span>(<span class="hljs-attr">actions</span>)=<span class="hljs-string">"row"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"info(row.item, row.index, $event.target)"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-1"</span>&gt;</span>
          Info modal
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"row.toggleDetails"</span>&gt;</span>
          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:row-details</span>=<span class="hljs-string">"row"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(value, key) in row.item"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"key"</span>&gt;</span>{{ key }}: {{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-table</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- Info modal --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-modal</span> <span class="hljs-attr">:id</span>=<span class="hljs-string">"infoModal.id"</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"infoModal.title"</span> <span class="hljs-attr">ok-only</span> @<span class="hljs-attr">hide</span>=<span class="hljs-string">"resetInfoModal"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">pre</span>&gt;</span>{{ infoModal.content }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-modal</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">items</span>: [
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Dickerson'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Macdonald'</span> } },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Shaw'</span> } },
          {
            <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-attr">age</span>: <span class="hljs-number">9</span>,
            <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Mini'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Navarro'</span> },
            <span class="hljs-attr">_rowVariant</span>: <span class="hljs-string">'success'</span>
          },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">89</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Geneva'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Wilson'</span> } },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Jami'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Carney'</span> } },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">27</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Essie'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Dunlap'</span> } },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Thor'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Macdonald'</span> } },
          {
            <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">age</span>: <span class="hljs-number">87</span>,
            <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Larsen'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Shaw'</span> },
            <span class="hljs-attr">_cellVariants</span>: { <span class="hljs-attr">age</span>: <span class="hljs-string">'danger'</span>, <span class="hljs-attr">isActive</span>: <span class="hljs-string">'warning'</span> }
          },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">26</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Mitzi'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Navarro'</span> } },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">22</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Genevieve'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Wilson'</span> } },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">38</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Carney'</span> } },
          { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">29</span>, <span class="hljs-attr">name</span>: { <span class="hljs-attr">first</span>: <span class="hljs-string">'Dick'</span>, <span class="hljs-attr">last</span>: <span class="hljs-string">'Dunlap'</span> } }
        ],
        <span class="hljs-attr">fields</span>: [
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'name'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Person Full name'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">sortDirection</span>: <span class="hljs-string">'desc'</span> },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'age'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Person age'</span>, <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">class</span>: <span class="hljs-string">'text-center'</span> },
          {
            <span class="hljs-attr">key</span>: <span class="hljs-string">'isActive'</span>,
            <span class="hljs-attr">label</span>: <span class="hljs-string">'is Active'</span>,
            <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">value, key, item</span>) =&gt;</span> {
              <span class="hljs-keyword">return</span> value ? <span class="hljs-string">'Yes'</span> : <span class="hljs-string">'No'</span>
            },
            <span class="hljs-attr">sortable</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">sortByFormatted</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">filterByFormatted</span>: <span class="hljs-literal">true</span>
          },
          { <span class="hljs-attr">key</span>: <span class="hljs-string">'actions'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'Actions'</span> }
        ],
        <span class="hljs-attr">totalRows</span>: <span class="hljs-number">1</span>,
        <span class="hljs-attr">currentPage</span>: <span class="hljs-number">1</span>,
        <span class="hljs-attr">perPage</span>: <span class="hljs-number">5</span>,
        <span class="hljs-attr">pageOptions</span>: [<span class="hljs-number">5</span>, <span class="hljs-number">10</span>, <span class="hljs-number">15</span>],
        <span class="hljs-attr">sortBy</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">sortDesc</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">sortDirection</span>: <span class="hljs-string">'asc'</span>,
        <span class="hljs-attr">filter</span>: <span class="hljs-literal">null</span>,
        <span class="hljs-attr">filterOn</span>: [],
        <span class="hljs-attr">infoModal</span>: {
          <span class="hljs-attr">id</span>: <span class="hljs-string">'info-modal'</span>,
          <span class="hljs-attr">title</span>: <span class="hljs-string">''</span>,
          <span class="hljs-attr">content</span>: <span class="hljs-string">''</span>
        }
      }
    },
    <span class="hljs-attr">computed</span>: {
      sortOptions() {
        <span class="hljs-comment">// Create an options list from our fields</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.fields
          .filter(<span class="hljs-function"><span class="hljs-params">f</span> =&gt;</span> f.sortable)
          .map(<span class="hljs-function"><span class="hljs-params">f</span> =&gt;</span> {
            <span class="hljs-keyword">return</span> { <span class="hljs-attr">text</span>: f.label, <span class="hljs-attr">value</span>: f.key }
          })
      }
    },
    mounted() {
      <span class="hljs-comment">// Set the initial number of items</span>
      <span class="hljs-keyword">this</span>.totalRows = <span class="hljs-keyword">this</span>.items.length
    },
    <span class="hljs-attr">methods</span>: {
      info(item, index, button) {
        <span class="hljs-keyword">this</span>.infoModal.title = <span class="hljs-string">`Row index: <span class="hljs-subst">${index}</span>`</span>
        <span class="hljs-keyword">this</span>.infoModal.content = <span class="hljs-built_in">JSON</span>.stringify(item, <span class="hljs-literal">null</span>, <span class="hljs-number">2</span>)
        <span class="hljs-keyword">this</span>.$root.$emit(<span class="hljs-string">'bv::show::modal'</span>, <span class="hljs-keyword">this</span>.infoModal.id, button)
      },
      resetInfoModal() {
        <span class="hljs-keyword">this</span>.infoModal.title = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.infoModal.content = <span class="hljs-string">''</span>
      },
      onFiltered(filteredItems) {
        <span class="hljs-comment">// Trigger pagination to update the number of buttons/pages due to filtering</span>
        <span class="hljs-keyword">this</span>.totalRows = filteredItems.length
        <span class="hljs-keyword">this</span>.currentPage = <span class="hljs-number">1</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/table#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-table" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-table&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table" class="anchorjs-link" aria-labelledby="comp-ref-b-table" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/table.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-table-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-table-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-table-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table&gt;</code> 事件 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-table-rootEventListeners"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table&gt;</code> <code data-v-866a22e8="" translate="translate" class="notranslate">$root</code> 事件监听器 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-table-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-props" class="anchorjs-link" aria-labelledby="comp-ref-b-table-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__454">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__454__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="items" class="" id="__BVID__454__row_items">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">items</code></td>
<td aria-colindex="2" role="cell" class="">Array or Function</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">[]</code></td>
<td aria-colindex="4" role="cell" class="">要显示的项目数组，或项目提供程序功能参考。 有关详细信息，请参阅文档</td>
</tr>
<tr role="row" data-pk="fields" class="" id="__BVID__454__row_fields">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fields</code></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">字段名称数组或字段定义对象数组</td>
</tr>
<tr role="row" data-pk="primary-key" class="" id="__BVID__454__row_primary-key">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">primary-key</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  表字段的名称，每行包含一个保证的唯一值。 需要tbody转换支持，并且还可以加速表格渲染</td>
</tr>
<tr role="row" data-pk="value" class="" id="__BVID__454__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">[]</code></td>
<td aria-colindex="4" role="cell" class="">当前显示的行数据 只读 不要为此属性设置值</td>
</tr>
<tr role="row" data-pk="striped" class="" id="__BVID__454__row_striped">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">striped</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将条纹应用于内容行</td>
</tr>
<tr role="row" data-pk="bordered" class="" id="__BVID__454__row_bordered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bordered</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">为所有单元格和标题添加边框</td>
</tr>
<tr role="row" data-pk="borderless" class="" id="__BVID__454__row_borderless">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">borderless</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">删除单元格的所有边框</td>
</tr>
<tr role="row" data-pk="outlined" class="" id="__BVID__454__row_outlined">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">outlined</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">向表格元素添加轮廓边框</td>
</tr>
<tr role="row" data-pk="dark" class="" id="__BVID__454__row_dark">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dark</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将桌子置于暗模式</td>
</tr>
<tr role="row" data-pk="hover" class="" id="__BVID__454__row_hover">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hover</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在行上启用悬停样式</td>
</tr>
<tr role="row" data-pk="small" class="" id="__BVID__454__row_small">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">small</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">用较小的单元格填充表</td>
</tr>
<tr role="row" data-pk="fixed" class="" id="__BVID__454__row_fixed">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fixed</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  使所有列均等宽（固定布局表）。 将加快大型表的渲染。 列宽可以通过CSS或colgroup设置</td>
</tr>
<tr role="row" data-pk="responsive" class="" id="__BVID__454__row_responsive">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">responsive</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  使表格在宽度上响应，并添加水平滚动条。 设置为true表示始终响应，或设置为从响应切换为正常的断点之一：“ sm”，“ md”，“ lg”，“ xl”</td>
</tr>
<tr role="row" data-pk="sticky-header" class="" id="__BVID__454__row_sticky-header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sticky-header</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  使表格标题变粘。 对于最大高度为300px的桌子，将其设置为true，或者将其设置为任何有效的CSS高（包括单位）</td>
</tr>
<tr role="row" data-pk="no-border-collapse" class="" id="__BVID__454__row_no-border-collapse">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-border-collapse</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.0.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用表格边框的折叠。 当表格具有粘性标题或列时很有用</td>
</tr>
<tr role="row" data-pk="caption-top" class="" id="__BVID__454__row_caption-top">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption-top</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">可视地将表格标题放在表格上方。 默认值如下。</td>
</tr>
<tr role="row" data-pk="table-variant" class="" id="__BVID__454__row_table-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体应用于整个表格</td>
</tr>
<tr role="row" data-pk="table-class" class="" id="__BVID__454__row_table-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于表元素</td>
</tr>
<tr role="row" data-pk="stacked" class="" id="__BVID__454__row_stacked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">stacked</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  将表格放在堆叠模式。 为始终堆叠设置为true，或设置为从堆叠切换为正常的断点之一：'sm'，'md'，'lg'，'xl'</td>
</tr>
<tr role="row" data-pk="head-variant" class="" id="__BVID__454__row_head-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标头变体：“浅”或“暗”，或未设置。 可能优先于行头变量</td>
</tr>
<tr role="row" data-pk="head-row-variant" class="" id="__BVID__454__row_head-row-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head-row-variant</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体应用于thead中的tr元素</td>
</tr>
<tr role="row" data-pk="thead-class" class="" id="__BVID__454__row_thead-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">thead-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（适用于thead元素）</td>
</tr>
<tr role="row" data-pk="thead-tr-class" class="" id="__BVID__454__row_thead-tr-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">thead-tr-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（一个或多个）应用于thead中的tr元素</td>
</tr>
<tr role="row" data-pk="foot-clone" class="" id="__BVID__454__row_foot-clone">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot-clone</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">启用到表的页脚，并默认情况下克隆标题内容</td>
</tr>
<tr role="row" data-pk="foot-variant" class="" id="__BVID__454__row_foot-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">页脚变体：“浅”或“暗”或未设置。 可能优先于行脚变化</td>
</tr>
<tr role="row" data-pk="foot-row-variant" class="" id="__BVID__454__row_foot-row-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot-row-variant</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体应用于tfoot中的tr元素。 跌落到头行变数</td>
</tr>
<tr role="row" data-pk="tfoot-class" class="" id="__BVID__454__row_tfoot-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tfoot-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于tfoot元素</td>
</tr>
<tr role="row" data-pk="tfoot-tr-class" class="" id="__BVID__454__row_tfoot-tr-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tfoot-tr-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于tfoot中的tr元素</td>
</tr>
<tr role="row" data-pk="tbody-tr-class" class="" id="__BVID__454__row_tbody-tr-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-tr-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object or Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于tbody中的tr元素。 可以是返回类的函数（有关详细信息，请参阅文档）</td>
</tr>
<tr role="row" data-pk="tbody-tr-attr" class="" id="__BVID__454__row_tbody-tr-attr">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-tr-attr</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">Object or Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要添加到tbody中每个tr的属性，或返回此类属性的函数（有关详细信息，请参阅文档）</td>
</tr>
<tr role="row" data-pk="details-td-class" class="" id="__BVID__454__row_details-td-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">details-td-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于详细信息行中的td元素</td>
</tr>
<tr role="row" data-pk="tbody-transition-props" class="" id="__BVID__454__row_tbody-transition-props">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-transition-props</code></td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">Vue的“过渡组”属性。 提供时将使tbody成为Vue的“过渡组”组件</td>
</tr>
<tr role="row" data-pk="tbody-transition-handlers" class="" id="__BVID__454__row_tbody-transition-handlers">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-transition-handlers</code></td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">Vue“过渡组”事件处理程序。 提供时将使tbody成为Vue的“过渡组”组件</td>
</tr>
<tr role="row" data-pk="tbody-class" class="" id="__BVID__454__row_tbody-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于tbody元素</td>
</tr>
<tr role="row" data-pk="filter" class="" id="__BVID__454__row_filter">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">filter</code></td>
<td aria-colindex="2" role="cell" class="">String or RegExp or Object or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">过滤条件。 内部过滤仅支持字符串或RegExpr条件。</td>
</tr>
<tr role="row" data-pk="filter-function" class="" id="__BVID__454__row_filter-function">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">filter-function</code></td>
<td aria-colindex="2" role="cell" class="">Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">引用要使用的功能，而不是内部过滤功能。 有关详细信息，请参阅文档</td>
</tr>
<tr role="row" data-pk="filter-ignored-fields" class="" id="__BVID__454__row_filter-ignored-fields">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">filter-ignored-fields</code></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">过滤项目数据时要忽略的顶级字段数组</td>
</tr>
<tr role="row" data-pk="filter-included-fields" class="" id="__BVID__454__row_filter-included-fields">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">filter-included-fields</code></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">过滤时要包括的字段数组。 覆盖filter-ignore-fields</td>
</tr>
<tr role="row" data-pk="filter-debounce" class="b-table-has-details" id="__BVID__454__row_filter-debounce" aria-details="__BVID__454__details_39_" aria-owns="__BVID__454__details_39_">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">filter-debounce</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.0.0+</span> <span data-v-866a22e8="" class="badge badge-danger">Deprecated</span></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class="">过滤记录之前消除对过滤条件的更改的时间（以毫秒为单位）</td>
</tr>
<tr aria-hidden="true" role="presentation" class="d-none"></tr>
<tr role="row" tabindex="-1" class="b-table-details" id="__BVID__454__details_39_">
<td colspan="4" role="cell" class=""><p data-v-866a22e8="" class="mb-1 small">
  不建议使用“过滤器反跳”属性。 请使用"&lt;b-form-input&gt;"的去抖动功能。
  </p></td>
</tr>
<tr role="row" data-pk="sort-by" class="" id="__BVID__454__row_sort-by">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sort-by</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当前正在排序的字段名称。 设置为null可清除排序。 可与.sync属性修改器同步</td>
</tr>
<tr role="row" data-pk="sort-desc" class="" id="__BVID__454__row_sort-desc">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sort-desc</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为true以按降序对列进行排序。 可与.sync属性修改器同步</td>
</tr>
<tr role="row" data-pk="sort-direction" class="" id="__BVID__454__row_sort-direction">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sort-direction</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'asc'</code></td>
<td aria-colindex="4" role="cell" class="">用于按“ asc”，“ desc”或“ last”对未排序列进行排序的初始排序方向（以使用先前的排序方向）</td>
</tr>
<tr role="row" data-pk="sort-compare" class="" id="__BVID__454__row_sort-compare">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sort-compare</code></td>
<td aria-colindex="2" role="cell" class="">Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">对用于对两行数据进行排序比较的函数的引用。 默认为内部排序比较例程。 有关详细信息，请参阅文档</td>
</tr>
<tr role="row" data-pk="sort-compare-options" class="" id="__BVID__454__row_sort-compare-options">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sort-compare-options</code></td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">{'numeric':true}</code></td>
<td aria-colindex="4" role="cell" class="">包含“ String.prototype.sortLocale”方法的排序配置的对象。 有关详细信息，请参阅文档</td>
</tr>
<tr role="row" data-pk="sort-compare-locale" class="" id="__BVID__454__row_sort-compare-locale">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sort-compare-locale</code></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在排序时指定语言的语言环境字符串（或语言环境字符串数组）。 有关详细信息，请参阅文档</td>
</tr>
<tr role="row" data-pk="sort-null-last" class="" id="__BVID__454__row_sort-null-last">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sort-null-last</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  排序时，将首先对null和undefined值进行排序（或最后排序，具体取决于'sort-desc'）。 设置此属性可以最后对空值排序。 仅适用于内部排序</td>
</tr>
<tr role="row" data-pk="no-sort-reset" class="" id="__BVID__454__row_no-sort-reset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-sort-reset</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  当一个表是可排序的时，单击任何不可排序的列标题将清除当前的排序值。 设置此道具以禁用此功能</td>
</tr>
<tr role="row" data-pk="label-sort-asc" class="" id="__BVID__454__row_label-sort-asc">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-sort-asc</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Click to sort Ascending'</code></td>
<td aria-colindex="4" role="cell" class="">单击单元格时在标题单元格中放置的隐藏字符串会将排序方向更改为升序</td>
</tr>
<tr role="row" data-pk="label-sort-desc" class="" id="__BVID__454__row_label-sort-desc">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-sort-desc</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Click to sort Descending'</code></td>
<td aria-colindex="4" role="cell" class="">单击单元格时在标题单元格中放置的隐藏字符串会将排序方向更改为降序</td>
</tr>
<tr role="row" data-pk="label-sort-clear" class="" id="__BVID__454__row_label-sort-clear">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-sort-clear</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Click to clear sorting'</code></td>
<td aria-colindex="4" role="cell" class="">单击单元格时隐藏在标题单元格中的字符串将清除当前排序方向</td>
</tr>
<tr role="row" data-pk="no-local-sorting" class="" id="__BVID__454__row_no-local-sorting">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-local-sorting</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用内部排序例程，并希望用户提供已排序的项目。 排序控件仍然可用</td>
</tr>
<tr role="row" data-pk="no-footer-sorting" class="" id="__BVID__454__row_no-footer-sorting">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-footer-sorting</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使用内置格式化程序时，设置此道具将禁用页脚中的排序功能</td>
</tr>
<tr role="row" data-pk="sort-icon-left" class="" id="__BVID__454__row_sort-icon-left">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sort-icon-left</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将排序控件放置在标题文本的左侧。 默认值位于标题文本的右侧</td>
</tr>
<tr role="row" data-pk="per-page" class="" id="__BVID__454__row_per-page">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">per-page</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class="">每页显示的行数。 设置为0禁用分页</td>
</tr>
<tr role="row" data-pk="current-page" class="" id="__BVID__454__row_current-page">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">current-page</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">1</code></td>
<td aria-colindex="4" role="cell" class="">对表进行分页时要显示的当前页码。 从1开始</td>
</tr>
<tr role="row" data-pk="caption" class="" id="__BVID__454__row_caption">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在标题元素中的文本字符串</td>
</tr>
<tr role="row" data-pk="caption-html" class="" id="__BVID__454__row_caption-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在标题元素中的HTML字符串。 谨慎使用</td>
</tr>
<tr role="row" data-pk="selectable" class="" id="__BVID__454__row_selectable">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">selectable</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将表主体行置于可选模式</td>
</tr>
<tr role="row" data-pk="select-mode" class="" id="__BVID__454__row_select-mode">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">select-mode</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'multi'</code></td>
<td aria-colindex="4" role="cell" class="">设置为“可选”时，表格的可选模式。 可能的值：“单”，“多”或“范围”</td>
</tr>
<tr role="row" data-pk="selected-variant" class="" id="__BVID__454__row_selected-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">selected-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'active'</code></td>
<td aria-colindex="4" role="cell" class="">
  Bootstrap颜色主题变体，用于将选定的行设置为该颜色。 使用任何标准的Bootstrap主题颜色变体，或特殊的表行变体“ active”（默认）。 设置为空字符串不使用变体</td>
</tr>
<tr role="row" data-pk="no-select-on-click" class="" id="__BVID__454__row_no-select-on-click">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-select-on-click</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">通过点击事件禁用行选择。 行选择将仅以编程方式可用</td>
</tr>
<tr role="row" data-pk="show-empty" class="" id="__BVID__454__row_show-empty">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">show-empty</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">启用后，没有要显示的项目记录，将显示一条消息，提示没有行显示</td>
</tr>
<tr role="row" data-pk="empty-text" class="" id="__BVID__454__row_empty-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">empty-text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'There are no records to show'</code></td>
<td aria-colindex="4" role="cell" class="">当表格中没有要显示的项目时显示的文本字符串</td>
</tr>
<tr role="row" data-pk="empty-html" class="" id="__BVID__454__row_empty-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">empty-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当表格中没有要显示的项目时显示的HTML字符串。 谨慎使用</td>
</tr>
<tr role="row" data-pk="empty-filtered-text" class="" id="__BVID__454__row_empty-filtered-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">empty-filtered-text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'There are no records matching your request'</code></td>
<td aria-colindex="4" role="cell" class="">当表格由于过滤而没有要显示的项目时显示的文本字符串</td>
</tr>
<tr role="row" data-pk="empty-filtered-html" class="" id="__BVID__454__row_empty-filtered-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">empty-filtered-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当表格由于过滤而没有要显示的项目时显示的HTML字符串。 谨慎使用</td>
</tr>
<tr role="row" data-pk="busy" class="" id="__BVID__454__row_busy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">busy</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置时，将表强制为繁忙状态。在调用项提供程序功能时自动设置</td>
</tr>
<tr role="row" data-pk="no-provider-paging" class="" id="__BVID__454__row_no-provider-paging">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-provider-paging</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，使用内部分页对数据进行分页。 否则，项目提供者应执行分页</td>
</tr>
<tr role="row" data-pk="no-provider-sorting" class="" id="__BVID__454__row_no-provider-sorting">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-provider-sorting</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，使用内部排序对数据进行排序。 否则，项目提供者应执行排序</td>
</tr>
<tr role="row" data-pk="no-provider-filtering" class="" id="__BVID__454__row_no-provider-filtering">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-provider-filtering</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，使用内部过滤对数据进行分页。 否则，期望提供者执行过滤</td>
</tr>
<tr role="row" data-pk="api-url" class="" id="__BVID__454__row_api-url">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">api-url</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">通过道具。 作为上下文对象的一部分传递给项目提供者函数</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-warning">
<p data-v-866a22e8="" class="mb-0 small"><strong data-v-866a22e8="">警告:</strong> 
  当传递原始用户提供的值时，支持HTML字符串（<code data-v-866a22e8="" translate="translate" class="notranslate">*-html</code>）的道具可能容易
  受到<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Cross-site_scripting" class="alert-link"> 跨站点脚本（XSS）攻击</a>。
  您必须先对用户输入进行正确的<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTML_sanitization" class="alert-link"> 清理 </a>！
  </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-table-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-table-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__540">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">插槽名称<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">描述</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">范围</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="cell({key})" class="" id="__BVID__540__row_cell({key})">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cell({key})</code></td>
<td aria-colindex="2" role="cell" class="">作用域插槽，用于字段数据的自定义数据呈现。 “ {key}”是字段的键名。 有关范围数据，请参阅文档</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="cell()" class="" id="__BVID__540__row_cell()">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cell()</code></td>
<td aria-colindex="2" role="cell" class="">用于字段数据的自定义数据呈现的默认作用域插槽。 有关范围数据，请参阅文档</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="head({key})" class="" id="__BVID__540__row_head({key})">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head({key})</code></td>
<td aria-colindex="2" role="cell" class="">用于自定义呈现字段标题的作用域插槽。 “ {key}”是字段的键名。 有关范围标头，请参见文档</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="head()" class="" id="__BVID__540__row_head()">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head()</code></td>
<td aria-colindex="2" role="cell" class="">用于自定义呈现字段标题的默认作用域插槽。 有关范围标头，请参见文档</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="foot({key})" class="" id="__BVID__540__row_foot({key})">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot({key})</code></td>
<td aria-colindex="2" role="cell" class="">用于自定义呈现字段页脚的作用域插槽。 “ {key}”是字段的键名。 请参阅文档以了解范围内的页脚</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="foot()" class="" id="__BVID__540__row_foot()">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot()</code></td>
<td aria-colindex="2" role="cell" class="">用于自定义呈现字段页脚的默认作用域插槽。 请参阅文档以了解范围内的页脚</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="table-caption" class="" id="__BVID__540__row_table-caption">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-caption</code></td>
<td aria-colindex="2" role="cell" class="">在表格的标题元素中显示的内容</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="table-colgroup" class="" id="__BVID__540__row_table-colgroup">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-colgroup</code></td>
<td aria-colindex="2" role="cell" class="">放置自定义colgroup和col元素的插槽。 可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="table-busy" class="" id="__BVID__540__row_table-busy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-busy</code></td>
<td aria-colindex="2" role="cell" class="">表处于繁忙状态时用于放置加载消息的可选插槽</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="row-details" class="" id="__BVID__540__row_row-details">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">row-details</code></td>
<td aria-colindex="2" role="cell" class="">作用域插槽，用于可选呈现其他记录详细信息。 请参阅文档以获取行详细信息支持</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="empty" class="" id="__BVID__540__row_empty">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">empty</code></td>
<td aria-colindex="2" role="cell" class="">当“项目”数组中没有项目时显示的内容。 可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="emptyfiltered" class="" id="__BVID__540__row_emptyfiltered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">emptyfiltered</code></td>
<td aria-colindex="2" role="cell" class="">在过滤后的“项目”数组中不存在任何项目时显示的内容。 可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="thead-top" class="" id="__BVID__540__row_thead-top">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">thead-top</code></td>
<td aria-colindex="2" role="cell" class="">用户提供的带有B-TH / B-TD的B-TR的`thead`元素中列标题上方的插槽。 可选范围。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="top-row" class="" id="__BVID__540__row_top-row">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">top-row</code></td>
<td aria-colindex="2" role="cell" class="">用户提供的B-TD单元的固定顶部行插槽。 可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="bottom-row" class="" id="__BVID__540__row_bottom-row">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bottom-row</code></td>
<td aria-colindex="2" role="cell" class="">用户提供的B-TD单元的固定底部行插槽。 可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="custom-foot" class="" id="__BVID__540__row_custom-foot">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">custom-foot</code></td>
<td aria-colindex="2" role="cell" class="">用户提供的B-TR，B-TH，B-TD的自定义页脚内容插槽。 可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-table-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-events" class="anchorjs-link" aria-labelledby="comp-ref-b-table-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__565">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="row-clicked" class="" id="__BVID__565__row_row-clicked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-clicked</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">单击的行的项目数据。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">单击的行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">单击某行时发出。</td>
</tr>
<tr role="row" data-pk="row-dblclicked" class="" id="__BVID__565__row_row-dblclicked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-dblclicked</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">双击该行的项目数据。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">双击行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">双击某行时发出。</td>
</tr>
<tr role="row" data-pk="row-middle-clicked" class="" id="__BVID__565__row_row-middle-clicked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-middle-clicked</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">该行的项目数据被单击中。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">该行的索引处于中间单击状态。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在单击鼠标中键时发出。</td>
</tr>
<tr role="row" data-pk="row-contextmenu" class="" id="__BVID__565__row_row-contextmenu">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-contextmenu</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">右键单击该行的项目数据。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">右键单击该行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">右键单击一行时发出。</td>
</tr>
<tr role="row" data-pk="row-hovered" class="" id="__BVID__565__row_row-hovered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-hovered</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">悬停的行的项目数据。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">悬停的行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">悬停时发出。</td>
</tr>
<tr role="row" data-pk="row-unhovered" class="" id="__BVID__565__row_row-unhovered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-unhovered</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">该行的项目数据未悬停。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">未悬停的行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当行未悬停时发出。</td>
</tr>
<tr role="row" data-pk="row-selected" class="" id="__BVID__565__row_row-selected">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-selected</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">rows</code> - <span data-v-866a22e8="">所选行项目的数组。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在选择或取消选择一个或多个行时触发。</td>
</tr>
<tr role="row" data-pk="head-clicked" class="" id="__BVID__565__row_head-clicked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">head-clicked</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">key</code> - <span data-v-866a22e8="">单击列键（字段名称）。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">field</code> - <span data-v-866a22e8="">字段定义对象。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">isFooter</code> - <span data-v-866a22e8="">
  如果事件来自于页脚单元格，则为“ True”</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">单击页眉或页脚单元格时发出。 不适用于“自定义脚”插槽。</td>
</tr>
<tr role="row" data-pk="sort-changed" class="" id="__BVID__565__row_sort-changed">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">sort-changed</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">ctx</code> - <span data-v-866a22e8="">表状态上下文对象。 参见文档。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当表格上的排序更改时发出</td>
</tr>
<tr role="row" data-pk="context-changed" class="" id="__BVID__565__row_context-changed">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">context-changed</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">ctx</code> - <span data-v-866a22e8="">表状态上下文对象。 参见文档。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">表状态上下文更改时发出</td>
</tr>
<tr role="row" data-pk="filtered" class="" id="__BVID__565__row_filtered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">filtered</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">filteredItems</code> - <span data-v-866a22e8="">
  过滤后的项目数组（在发生本地分页之前）。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当本地过滤导致项目数更改时发出。</td>
</tr>
<tr role="row" data-pk="refreshed" class="" id="__BVID__565__row_refreshed">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">refreshed</code></td>
<td aria-colindex="2" role="cell" class=""></td>
<td aria-colindex="3" role="cell" class="">当项目提供程序功能返回数据时发出。</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-table-rootEventListeners" tabindex="-1" class="bv-no-focus-ring mb-3">
  <span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate">$root</code> 事件监听器 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-rootEventListeners" class="anchorjs-link" aria-labelledby="comp-ref-b-table-rootEventListeners" target="_self"></a></span></h4>
<p data-v-866a22e8=""> 
  您可以通过在$root上发出以下事件来控制<code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table&gt;</code>：
</p>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__586">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="bv::refresh::table" class="" id="__BVID__586__row_bv::refresh::table">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bv::refresh::table</code></td>
<td aria-colindex="2" role="cell" class=""><p data-v-866a22e8="" class="mb-1"><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code> 
  <span data-v-866a22e8=""> - 通过表格ID以刷新数据</span></p></td>
<td aria-colindex="3" role="cell" class="">在$ root上发出此事件时刷新特定表格的数据</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-table-lite" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-table-lite&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-lite" class="anchorjs-link" aria-labelledby="comp-ref-b-table-lite" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/table-lite.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-table-lite-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table-lite&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-table-lite-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table-lite&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-table-lite-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table-lite&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-table-lite-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-lite-props" class="anchorjs-link" aria-labelledby="comp-ref-b-table-lite-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__600">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__600__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="items" class="" id="__BVID__600__row_items">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">items</code></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">[]</code></td>
<td aria-colindex="4" role="cell" class="">要显示的项目数组</td>
</tr>
<tr role="row" data-pk="fields" class="" id="__BVID__600__row_fields">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fields</code></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">字段名称数组或字段定义对象数组</td>
</tr>
<tr role="row" data-pk="primary-key" class="" id="__BVID__600__row_primary-key">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">primary-key</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  表字段的名称，每行包含一个保证的唯一值。 需要tbody转换支持，并且还可以加速表格渲染</td>
</tr>
<tr role="row" data-pk="value" class="" id="__BVID__600__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">[]</code></td>
<td aria-colindex="4" role="cell" class="">当前显示的行数据 只读 不要为此属性设置值</td>
</tr>
<tr role="row" data-pk="striped" class="" id="__BVID__600__row_striped">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">striped</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将条纹应用于内容行</td>
</tr>
<tr role="row" data-pk="bordered" class="" id="__BVID__600__row_bordered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bordered</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">为所有单元格和标题添加边框</td>
</tr>
<tr role="row" data-pk="borderless" class="" id="__BVID__600__row_borderless">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">borderless</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">删除单元格的所有边框</td>
</tr>
<tr role="row" data-pk="outlined" class="" id="__BVID__600__row_outlined">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">outlined</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">向表格元素添加轮廓边框</td>
</tr>
<tr role="row" data-pk="dark" class="" id="__BVID__600__row_dark">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dark</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将表格置于暗模式</td>
</tr>
<tr role="row" data-pk="hover" class="" id="__BVID__600__row_hover">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hover</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在行上启用悬停样式</td>
</tr>
<tr role="row" data-pk="small" class="" id="__BVID__600__row_small">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">small</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">用较小的单元格填充表格</td>
</tr>
<tr role="row" data-pk="fixed" class="" id="__BVID__600__row_fixed">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fixed</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  使所有列均等宽（固定布局表）。 将加快大型表的渲染。 列宽可以通过CSS或colgroup设置</td>
</tr>
<tr role="row" data-pk="responsive" class="" id="__BVID__600__row_responsive">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">responsive</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  使表格在宽度上响应，并添加水平滚动条。 设置为true表示始终响应，或设置为从响应切换为正常的断点之一：“ sm”，“ md”，“ lg”，“ xl”</td>
</tr>
<tr role="row" data-pk="sticky-header" class="" id="__BVID__600__row_sticky-header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sticky-header</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使表格标题变粘。 对于最大高度为300px的桌子，将其设置为true，或者将其设置为任何有效的CSS高（包括单位）</td>
</tr>
<tr role="row" data-pk="no-border-collapse" class="" id="__BVID__600__row_no-border-collapse">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-border-collapse</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.0.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用表格边框的折叠。 当表格具有粘性标题或列时很有用</td>
</tr>
<tr role="row" data-pk="caption-top" class="" id="__BVID__600__row_caption-top">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption-top</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">可视地将表格标题放在表格上方。默认值如下。</td>
</tr>
<tr role="row" data-pk="table-variant" class="" id="__BVID__600__row_table-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体应用于整个表格</td>
</tr>
<tr role="row" data-pk="table-class" class="" id="__BVID__600__row_table-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于表元素</td>
</tr>
<tr role="row" data-pk="stacked" class="" id="__BVID__600__row_stacked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">stacked</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  将桌子放在堆叠模式。 为始终堆叠设置为true，或设置为从堆叠切换为正常的断点之一：'sm'，'md'，'lg'，'xl'</td>
</tr>
<tr role="row" data-pk="head-variant" class="" id="__BVID__600__row_head-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标头变体：“浅”或“暗”，或未设置。 可能优先于行头变量</td>
</tr>
<tr role="row" data-pk="head-row-variant" class="" id="__BVID__600__row_head-row-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head-row-variant</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体应用于thead中的tr元素</td>
</tr>
<tr role="row" data-pk="thead-class" class="" id="__BVID__600__row_thead-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">thead-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（适用于thead元素）</td>
</tr>
<tr role="row" data-pk="thead-tr-class" class="" id="__BVID__600__row_thead-tr-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">thead-tr-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（一个或多个）应用于thead中的tr元素</td>
</tr>
<tr role="row" data-pk="foot-clone" class="" id="__BVID__600__row_foot-clone">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot-clone</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">启用到表的页脚，并默认情况下克隆标题内容</td>
</tr>
<tr role="row" data-pk="foot-variant" class="" id="__BVID__600__row_foot-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">页脚变体：“浅”或“暗”或未设置。 可能优先于行脚变化</td>
</tr>
<tr role="row" data-pk="foot-row-variant" class="" id="__BVID__600__row_foot-row-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot-row-variant</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体应用于tfoot中的tr元素。 跌落到头行变数</td>
</tr>
<tr role="row" data-pk="tfoot-class" class="" id="__BVID__600__row_tfoot-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tfoot-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于tfoot元素</td>
</tr>
<tr role="row" data-pk="tfoot-tr-class" class="" id="__BVID__600__row_tfoot-tr-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tfoot-tr-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于tfoot中的tr元素</td>
</tr>
<tr role="row" data-pk="tbody-tr-class" class="" id="__BVID__600__row_tbody-tr-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-tr-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object or Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于tbody中的tr元素。 可以是返回类的函数（有关详细信息，请参阅文档）</td>
</tr>
<tr role="row" data-pk="tbody-tr-attr" class="" id="__BVID__600__row_tbody-tr-attr">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-tr-attr</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">Object or Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要添加到tbody中每个tr的属性，或返回此类属性的函数（有关详细信息，请参阅文档）</td>
</tr>
<tr role="row" data-pk="details-td-class" class="" id="__BVID__600__row_details-td-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">details-td-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于详细信息行中的td元素</td>
</tr>
<tr role="row" data-pk="tbody-transition-props" class="" id="__BVID__600__row_tbody-transition-props">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-transition-props</code></td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">Vue的“过渡组”属性。提供时将使tbody成为Vue的“过渡组”组件</td>
</tr>
<tr role="row" data-pk="tbody-transition-handlers" class="" id="__BVID__600__row_tbody-transition-handlers">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-transition-handlers</code></td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">Vue“过渡组”事件处理程序。提供时将使tbody成为Vue的“过渡组”组件</td>
</tr>
<tr role="row" data-pk="tbody-class" class="" id="__BVID__600__row_tbody-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于tbody元素</td>
</tr>
<tr role="row" data-pk="caption" class="" id="__BVID__600__row_caption">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在标题元素中的文本字符串</td>
</tr>
<tr role="row" data-pk="caption-html" class="" id="__BVID__600__row_caption-html">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption-html</code> <span data-v-866a22e8="" class="badge badge-warning">Use with caution</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在标题元素中的HTML字符串。谨慎使用</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-warning">
<p data-v-866a22e8="" class="mb-0 small"><strong data-v-866a22e8="">警告:</strong> 
  当传递原始用户提供的值时，支持HTML字符串（<code data-v-866a22e8="" translate="translate" class="notranslate">*-html</code>）的属性
  可能容易受到<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Cross-site_scripting" class="alert-link"> 跨站点脚本（XSS）攻击 </a>。 
  您必须先对用户输入进行正确的 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTML_sanitization" class="alert-link"> 清理 </a>！
</p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-table-lite-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-lite-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-table-lite-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__649">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">插槽名称<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">描述</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">范围</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="cell({key})" class="" id="__BVID__649__row_cell({key})">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cell({key})</code></td>
<td aria-colindex="2" role="cell" class="">作用域插槽，用于字段数据的自定义数据呈现。“{key}”是字段的键名。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="cell()" class="" id="__BVID__649__row_cell()">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cell()</code></td>
<td aria-colindex="2" role="cell" class="">用于字段数据的自定义数据呈现的默认作用域插槽。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="head({key})" class="" id="__BVID__649__row_head({key})">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head({key})</code></td>
<td aria-colindex="2" role="cell" class="">用于自定义呈现字段标题的作用域插槽。“{key}”是字段的键名</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="head()" class="" id="__BVID__649__row_head()">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head()</code></td>
<td aria-colindex="2" role="cell" class="">用于自定义呈现字段标题的默认作用域插槽。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="foot({key})" class="" id="__BVID__649__row_foot({key})">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot({key})</code></td>
<td aria-colindex="2" role="cell" class="">用于自定义呈现字段页脚的作用域插槽。“{key}”是字段的键名。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="foot()" class="" id="__BVID__649__row_foot()">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot()</code></td>
<td aria-colindex="2" role="cell" class="">用于自定义呈现字段页脚的默认作用域插槽</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="table-caption" class="" id="__BVID__649__row_table-caption">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-caption</code></td>
<td aria-colindex="2" role="cell" class="">在表格的标题元素中显示的内容</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="table-colgroup" class="" id="__BVID__649__row_table-colgroup">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-colgroup</code></td>
<td aria-colindex="2" role="cell" class="">放置自定义colgroup和col元素的插槽。可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="row-details" class="" id="__BVID__649__row_row-details">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">row-details</code></td>
<td aria-colindex="2" role="cell" class="">作用域插槽，用于可选呈现其他记录详细信息。请参阅文档以获取行详细信息支持</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="thead-top" class="" id="__BVID__649__row_thead-top">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">thead-top</code></td>
<td aria-colindex="2" role="cell" class="">用户提供的带有B-TH/B-TD的B-TR的`thead`元素中列标题上方的插槽。可选范围。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="custom-foot" class="" id="__BVID__649__row_custom-foot">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">custom-foot</code></td>
<td aria-colindex="2" role="cell" class="">用户提供的B-TR和B-TH/B-TD的自定义页脚内容插槽。可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-table-lite-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-lite-events" class="anchorjs-link" aria-labelledby="comp-ref-b-table-lite-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__669">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="row-clicked" class="" id="__BVID__669__row_row-clicked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-clicked</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">单击的行的项目数据。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">单击的行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">单击某行时发出。</td>
</tr>
<tr role="row" data-pk="row-dblclicked" class="" id="__BVID__669__row_row-dblclicked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-dblclicked</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">双击该行的项目数据。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">双击行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">双击某行时发出。</td>
</tr>
<tr role="row" data-pk="row-middle-clicked" class="" id="__BVID__669__row_row-middle-clicked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-middle-clicked</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">该行的项目数据被单击中。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">该行的索引处于中间单击状态。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在单击鼠标中键时发出。</td>
</tr>
<tr role="row" data-pk="row-contextmenu" class="" id="__BVID__669__row_row-contextmenu">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-contextmenu</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">右键单击该行的项目数据。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">右键单击该行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">右键单击一行时发出。</td>
</tr>
<tr role="row" data-pk="row-hovered" class="" id="__BVID__669__row_row-hovered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-hovered</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">悬停的行的项目数据。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">悬停的行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">悬停时发出。</td>
</tr>
<tr role="row" data-pk="row-unhovered" class="" id="__BVID__669__row_row-unhovered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">row-unhovered</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">item</code> - <span data-v-866a22e8="">该行的项目数据未悬停。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">index</code> - <span data-v-866a22e8="">未悬停的行的索引。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当行未悬停时发出。</td>
</tr>
<tr role="row" data-pk="head-clicked" class="" id="__BVID__669__row_head-clicked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">head-clicked</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">key</code> - <span data-v-866a22e8="">单击列键（字段名称）。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">field</code> - <span data-v-866a22e8="">字段定义对象。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机事件对象。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">isFooter</code> - <span data-v-866a22e8="">
  如果事件来自于页脚单元格，则为“ True”</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">单击页眉或页脚单元格时发出。 不适用于“自定义脚”插槽。</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-table-simple" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-table-simple&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-simple" class="anchorjs-link" aria-labelledby="comp-ref-b-table-simple" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/table-simple.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-table-simple-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-table-simple&gt;</code>
   属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-table-simple-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-table-simple-props" class="anchorjs-link" aria-labelledby="comp-ref-b-table-simple-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__689">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__689__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="striped" class="" id="__BVID__689__row_striped">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">striped</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将条纹应用于内容行</td>
</tr>
<tr role="row" data-pk="bordered" class="" id="__BVID__689__row_bordered">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">bordered</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">为所有单元格和标题添加边框</td>
</tr>
<tr role="row" data-pk="borderless" class="" id="__BVID__689__row_borderless">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">borderless</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">删除单元格的所有边框</td>
</tr>
<tr role="row" data-pk="outlined" class="" id="__BVID__689__row_outlined">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">outlined</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">向表格元素添加轮廓边框</td>
</tr>
<tr role="row" data-pk="dark" class="" id="__BVID__689__row_dark">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">dark</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将表格置于暗模式</td>
</tr>
<tr role="row" data-pk="hover" class="" id="__BVID__689__row_hover">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hover</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在行上启用悬停样式</td>
</tr>
<tr role="row" data-pk="small" class="" id="__BVID__689__row_small">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">small</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">用较小的单元格填充表</td>
</tr>
<tr role="row" data-pk="fixed" class="" id="__BVID__689__row_fixed">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fixed</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  使所有列均等宽（固定布局表）。 将加快大型表的渲染。 列宽可以通过CSS或colgroup设置</td>
</tr>
<tr role="row" data-pk="responsive" class="" id="__BVID__689__row_responsive">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">responsive</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  使表格在宽度上响应，并添加水平滚动条。 设置为true表示始终响应，或设置为从响应切换为正常的断点之一：“ sm”，“ md”，“ lg”，“ xl”</td>
</tr>
<tr role="row" data-pk="sticky-header" class="" id="__BVID__689__row_sticky-header">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sticky-header</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  使表格标题变粘。 对于最大高度为300px的桌子，将其设置为true，或者将其设置为任何有效的CSS高（包括单位）</td>
</tr>
<tr role="row" data-pk="no-border-collapse" class="" id="__BVID__689__row_no-border-collapse">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-border-collapse</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.0.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用表格边框的折叠。 当表格具有粘性标题或列时很有用</td>
</tr>
<tr role="row" data-pk="caption-top" class="" id="__BVID__689__row_caption-top">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">caption-top</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">可视地将表格标题放在表格上方。 默认值如下。</td>
</tr>
<tr role="row" data-pk="table-variant" class="" id="__BVID__689__row_table-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体应用于整个表格</td>
</tr>
<tr role="row" data-pk="table-class" class="" id="__BVID__689__row_table-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">table-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）应用于表元素</td>
</tr>
<tr role="row" data-pk="stacked" class="" id="__BVID__689__row_stacked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">stacked</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  将桌子放在堆叠模式。 为始终堆叠设置为true，或设置为从堆叠切换为正常的断点之一：'sm'，'md'，'lg'，'xl'</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-tbody" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-tbody&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-tbody" class="anchorjs-link" aria-labelledby="comp-ref-b-tbody" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/tbody.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tbody-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tbody&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tbody-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-tbody-props" class="anchorjs-link" aria-labelledby="comp-ref-b-tbody-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__719">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tbody-transition-props" class="" id="__BVID__719__row_tbody-transition-props">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-transition-props</code></td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">Vue的“过渡组”属性。提供时将使tbody成为Vue的“过渡组”组件</td>
</tr>
<tr role="row" data-pk="tbody-transition-handlers" class="" id="__BVID__719__row_tbody-transition-handlers">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tbody-transition-handlers</code></td>
<td aria-colindex="2" role="cell" class="">Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">Vue“过渡组”事件处理程序。提供时将使tbody成为Vue的“过渡组”组件</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-thead" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-thead&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-thead" class="anchorjs-link" aria-labelledby="comp-ref-b-thead" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/thead.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-thead-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-thead&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-thead-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-thead-props" class="anchorjs-link" aria-labelledby="comp-ref-b-thead-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__735">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="head-variant" class="" id="__BVID__735__row_head-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">head-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标头变体：“浅”或“暗”，或未设置</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-tfoot" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-tfoot&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-tfoot" class="anchorjs-link" aria-labelledby="comp-ref-b-tfoot" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/tfoot.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tfoot-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tfoot&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tfoot-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-tfoot-props" class="anchorjs-link" aria-labelledby="comp-ref-b-tfoot-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__750">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="foot-variant" class="" id="__BVID__750__row_foot-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">foot-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">页脚变体：“浅”或“暗”，或未设置</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-tr" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-tr&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-tr" class="anchorjs-link" aria-labelledby="comp-ref-b-tr" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/tr.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tr-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tr&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tr-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-tr-props" class="anchorjs-link" aria-labelledby="comp-ref-b-tr-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__765">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="variant" class="" id="__BVID__765__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体之一应用于组件</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-td" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-td&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-td" class="anchorjs-link" aria-labelledby="comp-ref-b-td" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/td.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-td-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-td&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-td-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-td-props" class="anchorjs-link" aria-labelledby="comp-ref-b-td-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__780">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="variant" class="" id="__BVID__780__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体之一应用于组件</td>
</tr>
<tr role="row" data-pk="colspan" class="" id="__BVID__780__row_colspan">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">colspan</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">该单元格跨越的列数</td>
</tr>
<tr role="row" data-pk="rowspan" class="" id="__BVID__780__row_rowspan">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">rowspan</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">该单元格跨越的行数</td>
</tr>
<tr role="row" data-pk="stacked-heading" class="" id="__BVID__780__row_stacked-heading">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">stacked-heading</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在堆叠模式下前往单元格。 仅适用于“ tbody”元素中的单元格</td>
</tr>
<tr role="row" data-pk="sticky-column" class="" id="__BVID__780__row_sticky-column">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sticky-column</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">如果这将是粘性列。 必须在此列的所有单元格上进行设置。 表格必须处于粘页眉或响应模式下才能工作</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-th" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-th&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-th" class="anchorjs-link" aria-labelledby="comp-ref-b-th" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/table/th.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-th-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-th&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-th-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/table#comp-ref-b-th-props" class="anchorjs-link" aria-labelledby="comp-ref-b-th-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__799">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="variant" class="" id="__BVID__799__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将Bootstrap主题颜色变体之一应用于组件</td>
</tr>
<tr role="row" data-pk="colspan" class="" id="__BVID__799__row_colspan">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">colspan</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">该单元格跨越的列数</td>
</tr>
<tr role="row" data-pk="rowspan" class="" id="__BVID__799__row_rowspan">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">rowspan</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">该单元格跨越的行数</td>
</tr>
<tr role="row" data-pk="stacked-heading" class="" id="__BVID__799__row_stacked-heading">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">stacked-heading</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在堆叠模式下前往单元格。 仅适用于“ tbody”元素中的单元格</td>
</tr>
<tr role="row" data-pk="sticky-column" class="" id="__BVID__799__row_sticky-column">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sticky-column</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">如果这将是粘性列。 必须在此列的所有单元格上进行设置。 表格必须处于粘页眉或响应模式下才能工作</td>
</tr>
</tbody>
</table>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/table#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__815">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-table&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTable</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-table-lite&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTableLite</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-table-simple&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTableSimple</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-tbody&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTbody</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-thead&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BThead</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-tfoot&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTfoot</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-tr&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTr</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-td&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTd</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-th&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTh</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BTable } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-table'</span>, BTable)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/table#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__833">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">TablePlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p>该插件还自动包括以下插件：</p>
<ul>
<li><code translate="translate" class="notranslate">TableLitePlugin</code></li>
<li><code translate="translate" class="notranslate">TableSimplePlugin</code></li>
</ul>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { TablePlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(TablePlugin)</pre></figure>







</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
